jimingminlovefly

统计

最新评论

js-一个实用的案例j.suggest.js

 (function($) {

  
  $.suggest = function(input, options) {
 
   var $input = $(input).attr("autocomplete", "off");
   var $results;

   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())=='中文/拼音') $input.val('中文/拼音').css('color','#aaa');
   if( ! options.attachObject )
    options.attachObject = $(document.createElement("ul")).appendTo('body');

   $results = $(options.attachObject);
   $results.addClass(options.resultsClass);
   
   resetPosition();
   $(window)
    .load(resetPosition)  // just in case user is changing size of page while loading
    .resize(resetPosition);

   $input.blur(function() {
    //失去焦点时不用选中
    //selectCurrentResult();
    //$results.hide();
    
   });
   
   
   $input.focus(function(){
    if($.trim($(this).val())=='中文/拼音'){
     $(this).val('').css('color','#000');
    }
    if($.trim($(this).val())==''){
     displayItems('');//显示热门酒店列表
    }
   });
   $input.click(function(){
    var q=$.trim($(this).val());
    displayItems(q);
    ShowMark1();
   // $(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: (offset.top + input.offsetHeight) + 'px',
     left: offset.left + 'px'
    });
   }
   
   
   function processKey(e) {
    // handling up/down/escape requires results to be visible
    // handling enter/tab requires that AND a result to be selected
    if ((/27$|38$|40$/.test(e.keyCode) && $results.is(':visible')) ||
     (/^13$|^9$/.test(e.keyCode) && getCurrentResult())) {
             
              if (e.preventDefault)
                  e.preventDefault();
     if (e.stopPropagation)
                  e.stopPropagation();

                 e.cancelBubble = true;
                 e.returnValue = false;
    
     switch(e.keyCode) {
 
      case 38: // up
       prevResult();
       break;
    
      case 40: // down
       nextResult();
       break;
      case 13: // return
       selectCurrentResult();
       break;
       
      case 27: // escape
       $results.hide();
       break;
 
     }
     
    } else if ($input.val().length != prevLength) {
     if (timeout)
      clearTimeout(timeout);
     timeout = setTimeout(suggest, options.delay);
     prevLength = $input.val().length;
    }else if(e.keyCode!=this.keyCode){
     if (timeout)
      clearTimeout(timeout);
     timeout = setTimeout(suggest, options.delay);
     prevLength = $input.val().length;
    }  
     
    
   }
   
   function suggest() {
   
    var q = $.trim($input.val());
    displayItems(q);
   }  
   
   function displayItems(items) {
    var html = '';
    if (items=='') {//热门城市遍历
     for(h in options.hot_list){
      html+='<li  rel="'+options.hot_list[h][0]+'"><a href="#'+h+'">'+options.hot_list[h][1]+'</a></li>';
     }
     html='<div class="gray ac_result_tip">请输入中文/拼音或者↑↓选择</div><ul>'+html+'</ul>';
    }
    else {
     /*if (!items)
     return;
     if (!items.length) {
      $results.hide();
      return;
     }*/
     for (var i = 0; i < options.source.length; i++) {//酒店
      var reg = new RegExp('.*?' + items + '.*?', 'im');//var reg = new RegExp('^' + items + '.*$', 'im');
      if (reg.test(options.source[i][0]) || reg.test(options.source[i][1]) || reg.test(options.source[i][2]) || reg.test(options.source[i][3])) {
       html += '<li  rel="' + options.source[i][0] + '"><a href="#' + i + '"  >' + options.source[i][1] + '</a></li>';
      }
     }
     if (html == '') {
      suggest_tip = '<div   class="gray ac_result_tip">对不起,找不到:' + items + '</div>';
     }
     else {
      suggest_tip = '<div class="gray ac_result_tip">' + items + ',按拼音排序</div>';
     }
     html = suggest_tip + '<ul>' + html + '</ul>';
    }

    $results.html(html).show().bgiframe();
    $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();
      HideMark1();
     });
   }
      
   function getCurrentResult() {
    
    
   
    if (!$results.is(':visible'))
     return false;
   
    var $currentResult = $results.children('ul').children('li.' + options.selectClass);
    
    if (!$currentResult.length)
     $currentResult = false;
     
    return $currentResult;

   }
   
   function selectCurrentResult() {
    $currentResult = getCurrentResult();
  
    if ($currentResult) {
      $input.val($currentResult.children('a').html().replace(/<span>.+?<\/span>/i,''));
      $results.hide();

     if( $(options.dataContainer) ) {
      $(options.dataContainer).val($currentResult.attr('rel'));
     }
 
     if (options.onSelect) {
      options.onSelect.apply($input[0]);
     }
    }
   
   }
   
   function ss()
   {
    alert("点击li");
   }
   
   
   function nextResult() {
   
    $currentResult = getCurrentResult();
    $currentResult.removeClass(options.selectClass);
    if ($currentResult.next().is("li"))
     $currentResult.next().addClass(options.selectClass);
    else
     $results.children('ul').children('li:first-child').addClass(options.selectClass);
   
   }
   
   function prevResult() {
   
    $currentResult = getCurrentResult();
    $currentResult.removeClass(options.selectClass);
    if ($currentResult.prev().is("li"))
     $currentResult.prev().addClass(options.selectClass);
    else
     $results.children('ul').children('li:last-child').addClass(options.selectClass);
   
   }
 
  }
  
  $.fn.suggest = function(source, options) {
  
   if (!source)
    return;
  
   options = options || {};
   options.source = source;
   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;
 
   this.each(function() {
    new $.suggest(this, options);
   });
 
   return this;
   
  };
  
 })(jQuery);

posted on 2012-01-05 13:57 计明敏 阅读(2778) 评论(3)  编辑  收藏 所属分类: js

评论

# re: js-一个实用的案例j.suggest.js[未登录] 2013-01-31 11:54 123

f  回复  更多评论   

# re: js-一个实用的案例j.suggest.js[未登录] 2013-01-31 11:54 123

sdf  回复  更多评论   

# re: js-一个实用的案例j.suggest.js 2014-10-16 14:02 hu

fgdf  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: