You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
6.6 KiB
JavaScript
237 lines
6.6 KiB
JavaScript
var prompt = '';
|
|
(function($) {
|
|
$.suggest = function(input, options) {
|
|
var $input = $(input).prop("autocomplete", "off");
|
|
var $results;
|
|
var $hiddenId;
|
|
|
|
var timeout = false; // hold timeout ID for suggestion results to appear
|
|
var prevLength = 0; // last recorded length of $input.val()
|
|
var cache = []; // cache MRU list
|
|
var cacheSize = 0; // size of cache in chars (bytes?)
|
|
|
|
if ($.trim($input.val()) == '' || $.trim($input.val()) == prompt)
|
|
$input.val(prompt).css('color', '#aaa');
|
|
if (!options.attachObject){
|
|
options.attachObject = $(document.createElement("ul")).appendTo('body');
|
|
}
|
|
|
|
$results = $(options.attachObject);
|
|
$results.addClass(options.resultsClass);
|
|
$hiddenId = $(options.idObject)
|
|
|
|
resetPosition();
|
|
$(window).load(resetPosition).resize(resetPosition);
|
|
|
|
$input.blur(function() {
|
|
setTimeout(function() {
|
|
$results.hide()
|
|
}, 200);
|
|
});
|
|
|
|
$input.focus(function() {
|
|
if ($.trim($(this).val()) == prompt) {
|
|
$(this).val('').css('color', '#000');
|
|
}
|
|
displayItems($.trim($(this).val()));
|
|
});
|
|
|
|
$input.click(function() {
|
|
var q = $.trim($(this).val());
|
|
if (q == '') {
|
|
displayItems('');
|
|
}
|
|
$(this).select();
|
|
});
|
|
|
|
// help IE users if possible
|
|
try {
|
|
$results.bgiframe();
|
|
} catch (e) {
|
|
}
|
|
|
|
$input.keyup(processKey); //
|
|
|
|
function resetPosition() {
|
|
// requires jquery.dimension plugin
|
|
var offset = $input.offset();
|
|
$results.css({
|
|
top : '35px',
|
|
left : '0px'
|
|
});
|
|
}
|
|
|
|
function processKey(e) {
|
|
if ((/27$|38$|40$/.test(e.keyCode) && $results.is(':visible'))
|
|
|| (/^13$|^9$/.test(e.keyCode))) {
|
|
var type = $('#type');
|
|
var flag = true;
|
|
if (flag) {
|
|
if (e.preventDefault){
|
|
e.preventDefault();
|
|
}
|
|
if (e.stopPropagation){
|
|
e.stopPropagation();
|
|
}
|
|
|
|
e.cancelBubble = true;
|
|
e.returnValue = false;
|
|
switch (e.keyCode) {
|
|
case 38:
|
|
prevResult();
|
|
break;
|
|
case 40:
|
|
nextResult();
|
|
break;
|
|
case 13:
|
|
selectCurrentResult();
|
|
break;
|
|
case 27:
|
|
$results.hide();
|
|
break;
|
|
}
|
|
}
|
|
|
|
} else if ($input.val().length != prevLength) {
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
timeout = setTimeout(suggest, options.delay);
|
|
prevLength = $input.val().length;
|
|
}
|
|
}
|
|
|
|
function suggest() {
|
|
var q = $.trim($input.val());
|
|
var type = $("#type").val();
|
|
displayItems(q);
|
|
}
|
|
|
|
function displayItems(items) {
|
|
var html = '';
|
|
var type = $("#type").val();
|
|
if (items == '' || items == undefined) {
|
|
$.each(options.hot_list, function(i,v){
|
|
html += '<li data-word="' + v.value + '"><a href="#' + i + '"><span class="text-muted"> 约' + v.amount + '个商品</span>' + v.value + '</a></li>';
|
|
});
|
|
if(html != '') {
|
|
html = '<div class="gray ac_result_tip">请输入中文/拼音或者↑↓选择</div><ul>' + html + '</ul>';
|
|
$results.html(html).show();
|
|
}
|
|
$results.children('ul').children('li').mouseover(function() {
|
|
$results.children('ul').children('li').removeClass(options.selectClass);
|
|
$(this).addClass(options.selectClass);
|
|
}).click(function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
selectCurrentResult();
|
|
});
|
|
} else {
|
|
var pageId = $("#pageID").val();
|
|
var level = 2;
|
|
var cids = $('#cid2s').val();
|
|
if(pageId == 'product'){
|
|
level = 3;
|
|
cids = $("#cid3").val();
|
|
}
|
|
$.ajax({
|
|
url : options.action,
|
|
data : {'keyword' : items},
|
|
dataType : 'json',
|
|
success : function(response){
|
|
if(response){
|
|
var dataList = response;
|
|
for(var i in dataList){
|
|
var dv = dataList[i].value.replace(items, '');
|
|
dv = items + '<b>' + dv + '</b>';
|
|
html += '<li data-word="' + dataList[i].value + '"><a href="#' + i + '"><span class="text-muted"> 约' + dataList[i].amount + '个商品</span>' + dv + '</a></li>';
|
|
}
|
|
if (html == '') {
|
|
// suggest_tip = '<div class="gray ac_result_tip"></div>';
|
|
} else {
|
|
suggest_tip = '<div class="gray ac_result_tip">'+ items + '，按京东推荐排序</div>';
|
|
html = suggest_tip + '<ul>' + html + '</ul>';
|
|
}
|
|
|
|
$results.html(html).show();
|
|
// $results.children('ul').children('li:first-child').addClass(options.selectClass);
|
|
|
|
$results.children('ul').children('li').mouseover(function() {
|
|
$results.children('ul').children('li').removeClass(options.selectClass);
|
|
$(this).addClass(options.selectClass);
|
|
}).click(function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
selectCurrentResult();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
}
|
|
function getCurrentResult() {
|
|
if (!$results.is(':visible')){
|
|
return false;
|
|
}
|
|
var $currentResult = $results.find('li.' + options.selectClass);
|
|
if (!$currentResult.length) {
|
|
$currentResult = false;
|
|
}
|
|
return $currentResult;
|
|
}
|
|
function selectCurrentResult() {
|
|
$currentResult = getCurrentResult();
|
|
if ($currentResult) {
|
|
var type = $('#type').val();
|
|
$input.val($currentResult.data('word'));
|
|
if ($(options.dataContainer)) {
|
|
$(options.dataContainer).val($currentResult.data('word'));
|
|
}
|
|
if (options.onSelect) {
|
|
options.onSelect.apply($input[0]);
|
|
}
|
|
}
|
|
$results.hide();
|
|
}
|
|
function nextResult() {
|
|
$currentResult = getCurrentResult();
|
|
if ($currentResult) {
|
|
$currentResult.removeClass(options.selectClass).next().addClass(options.selectClass);
|
|
}
|
|
else {
|
|
$results.children('ul').children('li:first-child').addClass(options.selectClass);
|
|
}
|
|
}
|
|
function prevResult() {
|
|
$currentResult = getCurrentResult();
|
|
if ($currentResult) {
|
|
$currentResult.removeClass(options.selectClass).prev().addClass(options.selectClass);
|
|
} else {
|
|
$results.children('ul').children('li:last-child').addClass(options.selectClass);
|
|
}
|
|
}
|
|
}
|
|
|
|
$.fn.suggest = function(options) {
|
|
options = options || {};
|
|
options.hot_list = options.hot_list || [];
|
|
options.delay = options.delay || 0;
|
|
options.resultsClass = options.resultsClass || 'ac_results';
|
|
options.selectClass = options.selectClass || 'ac_over';
|
|
options.matchClass = options.matchClass || 'ac_match';
|
|
options.minchars = options.minchars || 1;
|
|
options.delimiter = options.delimiter || '\n';
|
|
options.onSelect = options.onSelect || false;
|
|
options.dataDelimiter = options.dataDelimiter || '\t';
|
|
options.dataContainer = options.dataContainer || '#SuggestResult';
|
|
options.attachObject = options.attachObject || null;
|
|
options.idObject = options.idObject || null;
|
|
prompt = options.prompt || '请输入您店铺的分类名称';
|
|
this.each(function() {
|
|
new $.suggest(this, options);
|
|
});
|
|
|
|
return this;
|
|
};
|
|
})(jQuery); |