实现类似于百度实时搜索将结果在下拉框中显示的功能

本文主要实现一个类似于百度搜索一样，当在输入框中输入内容实时向后台发送请求，并将返回的内容在输入框下面用下拉框的形式显示出来的功能。

由于本人是前端程序员，so，这里只介绍前端实现部分，实现分为HTML，JS两部分（后台对接使用的是PHP）：

HTML：

　　第一步：封装一个组件用于页面实现

 1 /**
 2      * Print a FilterlistDiv
 3      *
 4      * @param  string $name 表单提交的字段name
 5      * @param  string $value 表单提交的value
 6      * @param  string $searchInputId  输入框id
 7      * @param  string $inputVal  输入框value
 8      * @param  string $filterDivId
 9      * @param  string $class
10      * @param  string $inputPlaceholder
11      * @param  string $searchInputName 需要提交的input的name属性
12      * @access public
13      * @return string
14      */
15      public static function searchFilterInput($name, $value, $searchInputId, $inputVal = '', $class = '', $inputPlaceholder = '', $searchInputName = '')
16      {
17         $html = '';
18         $html .= html::input($name, $value, "class='hidden'");
19         $html .= html::input($searchInputName, $inputVal, "id='{$searchInputId}' placeholder='{$inputPlaceholder}' class='form-control {$class}'");
20         $html .= "<div class='inputFilter'></div>";
21 
22         return $html;
23      }

　　第二步：页面调用该组件

1 // 页面调用
2 echo html::searchFilterInput('trader',  '' ,'traderInput', '', '', , );

JS部分：

　　第一步：通过扩展jQuery的方式将该方法进行封装，主要包含实时请求事件以及键盘操作事件，该方法根据传入的参数来进行不同的处理，主要处理的参数有：1.url：搜索数据的url；2.getAll:用于标示若输入为空时是否显示所有数据（适用于数据列表少的数据，类似于select下拉框）；3.canAdd:用于标识当输入的信息搜索不到时是否允许用户将该信息作为新的数据添加进来。在进行实时请求中，使用setTimeout来进行节流，防止向后台请求频率过多。

  1 +function($, window, document, Math)
  2 {
  3     'use strict';
  4 
  5     var searchFilter = function(element, options)
  6     {
  7         this.$            = $(element);
  8         this.options      = this.getOptions(options);
  9         this.$next        = this.$.next();
 10 
 11         this.init();
 12     };
 13 
 14     searchFilter.prototype.getOptions = function (options)
 15     {
 16         options = $.extend({}, searchFilter.DEFAULTS, this.$.data(), options);
 17         return options;
 18     };
 19 
 20     searchFilter.prototype.init = function()
 21     {
 22         //绑定事件
 23         this.bindEvents();
 24     };
 25 
 26     searchFilter.prototype.bindEvents = function()
 27     {
 28         var $this = this.$,
 29             $next = this.$next,
 30             url   = this.options.url,
 31             getAll= this.options.getAll,
 32             cantFindInfo = this.options.cantFindInfo ? this.options.cantFindInfo : '',
 33             canAdd= this.options.canAdd;
 34 
 35         var focus = function(){
 36             if($next.find('ul li').length > 1)
 37             {
 38                 $next.width($this.width()+20);
 39                 $next.show();
 40             }
 41 
 42             // 通过仓库动态加载货位
 43             if($this.attr('id') == 'shelfInput'){
 44                 var store = $this.parents('#selectPosition').find('#store').val();
 45                 url = createLink('store', 'getShelvesBySearch', 'storeId='+store);
 46             }
 47 
 48             $this.unbind('input propertychange');
 49             $this.bind('input propertychange', change);
 50             if(getAll){
 51                 getListByInput($this.val());
 52             }
 53             else if($this.val() !== '' && $next.find("li").length == 0){
 54                 getListByInput($this.val());
 55             }
 56         }
 57 
 58         var blur = function(){
 59             setTimeout(function(){
 60                 $next.hide();
 61                 $this.prev().val('');
 62                 if($this.val() !== '')
 63                 {
 64                     var lis = $next.find("li");
 65                     for(var i = 0; i < lis.length; i++){
 66                         if($this.val() == lis[i].innerText){
 67                             $this.prev().val($(lis[i]).attr('id'));
 68                             break;
 69                         }
 70                     }
 71                     
 72                     if($this.prev().val() == '' && !canAdd){
 73                         $this.val('');
 74                     }
 75                 }
 76             },200);
 77         }
 78 
 79         var change = function(){
 80             if($this.val() != '' || getAll){
 81                 $next.width($this.width()+20);
 82                 $next.show();
 83                 setTimeout(function(){getListByInput($this.val())}, 300);
 84             }
 85         }
 86 
 87         var keydown = function(){
 88             var key       = event.keyCode,
 89                 searchNum = $next.find("li").length, // 搜索到的相关条数
 90                 li        = $next.find("li.active-item"), // 当前通过键盘选中的是第几条li
 91                 index     = $next.find('li').index(li);
 92 
 93             switch(key)
 94             {
 95                 case 13: // 回车键
 96                     event.preventDefault();
 97                     if(li.attr('id')) {
 98                         selectOptionToInput(li.attr('id'), li.text());
 99                     }
100                     $next.hide();
101                     break;
102                 case 38: // 上键
103                     event.stopPropagation();
104                     event.preventDefault();
105                     if(index >= 0)
106                     {
107                         index--;
108                         if (index == -1){
109                             if(canAdd)  $next.find("li").removeClass('active-item');
110                             else        index = 0; //到顶了
111                         }
112 
113                         // 使选中的焦点永远能看到
114                         var $currLi = $next.find("li:eq(" + index + ")"),
115                             $contanier = $currLi.closest('.inputFilter');
116 
117                         if($currLi.position().top <= 20 )
118                         {
119                             $contanier.scrollTop($contanier.scrollTop() - $currLi.height());
120                         }
121                     }
122 
123                     break;
124                 case 40: // 下键
125                     event.stopPropagation();
126                     event.preventDefault();
127                     $next.show();
128                     index++;
129 
130                     if (index == searchNum) index = searchNum - 1; //到底了
131 
132                     // 使选中的焦点永远能看到
133                     var $currLi = $next.find("li:eq(" + index + ")"),
134                         $contanier = $currLi.closest('.inputFilter');
135 
136                     if(($currLi.position().top + $currLi.height() + 20) > $contanier.height())
137                     {
138                         $contanier.scrollTop($contanier.scrollTop() + $currLi.height());
139                     }
140 
141                     break;
142                 default: break;
143             }
144             if(index >= 0){
145                 li = $next.find("li:eq(" + index + ")");
146                 li.addClass("active-item").siblings().removeClass('active-item');
147             }
148         }
149 
150         var getListByInput = function(value)
151         {
152             $.ajax({
153                 type: "POST",
154                 data: {"value": value},
155                 url :  url,
156                 dataType:'json',
157                 success:function(data){
158                   var searchList = "<ul>";
159 
160                   if(!isEmptyObj(data))
161                   {
162                       for(var key in data){
163                           var li = "<li id='" + key + "'>" + data[key] + "<b></b></li>";
164                           searchList += li;
165                       }
166                   } else {
167                       searchList += "<li>" + cantFindInfo + "</li>";
168                   }
169 
170                   searchList += "</ul>";
171 
172                   // 重新加载下拉列表
173                   $next.find('ul').remove();
174                   $next.append(searchList);
175                   $next.find('li').each(function(i,e){
176                       $(e).on('click',function(){
177                           selectOptionToInput($(this).attr('id'), $(this).text());
178                       });
179                   });
180 
181                   // 若没有显示下拉框则显示下拉框
182                   if(getAll && $next.find('ul li').length > 1){
183                     $next.width($this.width()+20);
184                     $next.show();
185                   }
186                   if(!canAdd){
187                     $next.find("li:eq(0)").addClass('active-item');
188                   }
189                 },
190                 error:function(message){
191                 }
192             });
193         }
194 
195         var selectOptionToInput = function(id, name)
196         {
197             var $prev = $this.prev();
198 
199             $this.val(name);
200             $prev.val(id);
201             $prev.change();
202             $next.find('li#'+id).addClass('active-item').siblings().removeClass('active-item');
203         }
204 
205         this.$.on('focus', focus);
206         this.$.on('keydown', keydown);
207         this.$.on('blur', blur);
208         if($this.is(":focus")){
209             $this.bind('input propertychange', change);
210         }
211     }
212 
213     $.fn.searchFilter = function(option)
214     {
215         return this.each(function()
216         {
217             var $this   = $(this);
218             var data    = $this.data('zui.searchFilter');
219             var options = typeof option == 'object' && option;
220 
221             if (!data) $this.data('zui.searchFilter', (data = new searchFilter(this, options)));
222 
223             if (typeof option == 'string') data[option]();
224         })
225     };
226 
227     $.fn.searchFilter.Constructor = searchFilter;
228 }(jQuery,window,document,Math);

　　第二步：调用searchFilter方法

1  $('#traderInput').searchFilter({url: getTraderUrl, cantFindInfo: “无法找到该信息”});