输入框智能提示（一）

摘自：http://www.zhaochao.top/article/77，更多开发技术请访问 https://www.zhaochao.top

这里使用select实现，之后会更新使用ul和li实现的代码

效果如下：

代码（部分核心代码）：

var data = [
           {'data': '1122334'},
           {'data': '122334'},
           {'data': '1122334'},
           {'data': '11565334'},
           {'data': '113422345'},
           {'data': '1234'},
           {'data': '4521'},
           {'data': '27736211'},
           {'data': '832113124223'},
           {'data': '中国'},
           {'data': '中国地理'},
           {'data': '中国地理位置'},
       ];
var ckList;
$(function () {
   ckList = getCfCkMcList("");
   data = searchData(data, '', true);
   var f = false;
   $('.searchNotice').hover(function () {
      f = true;
   }, function () {
      f = false;
   });
   $('.searchNotice').click(function () {
      $('#searchInfo').val($(this).val());
      $(this).hide();
   });
   $('#searchInfo').blur(function () {
      /*setTimeout(function () {
         $('.searchNotice').hide();
      }, 100);*/
      if (!f) {
         $('.searchNotice').hide();
      }
   });
});

/**
 * 搜索框智能提示
 * @returns
 */
function notice () {
   var max = 20;
   var res = {
      'list': []
   };
   var info = $('#searchInfo').val().trim();
   if (info != null || info != "") {
      if (info.length >= 1) {
         data = searchData(data, info, false);
         var t = 0;
         for(var i = 0; i < data.length; i++) {
            if (t >= max) {
               break;
            }
            if (data[i].data.indexOf(info) > -1) {
               t++;
               var temp = {
                  'order': data[i].data.indexOf(info),
                  'content': data[i].data, 
               }
               res.list.push(temp);
            }
         }
         res.list.sort(function (a, b) {
            return a.order - b.order;
         });
         $('.searchNotice').empty();
         if (res.list == null || res.list.length == 0) {
            $('.searchNotice').empty().hide();
            return;
         }
         $.each(res.list, function (i, e) {
            $('.searchNotice').append('<option title="' + e.content + '">' + e.content + '</option>')
         });
         $('.searchNotice').show();
      }
      if (info.length < 1) {
         $('.searchNotice').empty().hide();
      }
   } else {
      $('.searchNotice').empty().hide();
   }
   
}
var flag;
function searchData(data, info, first) {
   if (flag == info) {
      return data;
   } else {
      flag = info;
   }
   var phList, jgdwList;
   data = [];
   if (first == true) {
      phList = loadMhPhList("65");
      jgdwList = loadJgdwMcList("新疆");
   } else {
      if (/^\d*$/.test(info)) {
         phList = loadMhPhList(info);
      } else {
         jgdwList = loadJgdwMcList(info);
      }
   }
   if (phList != null) {
      data = addData(data, phList);
   }
   data = addData(data, ckList);
   if (jgdwList != null) {
      data = addData(data, jgdwList);
   }
   return data;
}

function addData(data, source) {
   for (var i = 0; i < source.length; i++) {
      data.push(source[i]);
   }
   return data;
}

更多技术资源请访问 http://www.zhaochao.top