输入框智能提示（一）

来源：互联网发布：app 实时数据展示页面编辑：程序博客网时间：2024/05/17 08:49
摘自：http://www.zhaochao.top/iBlog/article.html?id=77
这里使用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
阅读全文
0 0