jimingminlovefly

          統(tǒng)計

          最新評論

          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 計明敏 閱讀(2821) 評論(3)  編輯  收藏 所屬分類: js

          評論

          # re: js-一個實用的案例j.suggest.js[未登錄] 2013-01-31 11:54 123

          f  回復(fù)  更多評論   

          # re: js-一個實用的案例j.suggest.js[未登錄] 2013-01-31 11:54 123

          sdf  回復(fù)  更多評論   

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

          fgdf  回復(fù)  更多評論   

          主站蜘蛛池模板: 桦甸市| 岳阳市| 大兴区| 来宾市| 南陵县| 北川| 清丰县| 和硕县| 南投市| 甘孜县| 刚察县| 石景山区| 大方县| 咸阳市| 渝北区| 辰溪县| 将乐县| 阳谷县| 衢州市| 龙口市| 四平市| 永靖县| 固始县| 乾安县| 江安县| 夏邑县| 阿克陶县| 锦屏县| 溧水县| 璧山县| 孟连| 偃师市| 博乐市| 大丰市| 铜梁县| 简阳市| 赞皇县| 怀宁县| 寿光市| 三亚市| 绥江县|