jquery智能提示控件,jquery提示控件,intellSeach.js
web前端-js教程
A、需求易语言刷钻盗号源码,vscode 中的下划线,ubuntu初学教程,tomcat别人访问不,亚马逊雨林爬虫,php后端管理模板,余杭区seo推广哪里好,超酷播放网站lzw
我们经常会遇到【站内搜索】的需求，为了提高用户体验，我们希望能做到像百度那样的即时智能提示。例如：某公司人事管理系统，想搜索李XX，只要输入“李”，系统自然会提示一些姓李的员工，这样方便用户使用。说白了，就是用户边输入，系统会提示相关的结果；或者，当用户点击搜索框时，就推荐一些内容，如360、百度都会提示今天的主要新闻或搜索量大的内容。c web项目源码,VScode可以编什么语言,ubuntu 12 主题,tomcat 是干嘛的,爬虫里lxml,迅雷怎么打开php文件,惠州SEO顾问咨询服务,文化传播网站源码,机械模板lzw
jquery 已经有一个这样的插件了，叫 autocomplete, 但我觉得不好用。关于autocomplete的介绍也很多，有兴趣的朋友可以去试试。魔力微信相册源码,vs vscode区别,mac如何使用ubuntu,tomcat发布站点,sqlite表行数,饼状图柱状图趋势图js插件,ssh框架前端有什么,爬虫案件 杭州,php exec,陕西网站seo,广告网站系统,外国网页模板,织梦模板响应式下载,易启秀h5页面制作工具,律师事务所管理系统源码,大秀最新诱导程序lzw
看标题就知道，这里只是分享一个插件，不会讨论后台搜索的相关算法和过程，也就是说，后台返回特定格式的数据，控件负责渲染结果呈现。ok,先看一下效果图：
样式与控件无关，只需要一个 input text 就可以了。
B、参数说明
控件以json格式作为传输格式。参数比较多，大部分都有默认值（具体看源码），有些可能不常用，保持默认即可。如下：
url: 请求地址。如：Handler.ashx, 后台获取数据的地址
property: 要显示的json对象的属性。如果我们直接返回[“tom”,”tom cat”,”tom2″] 这样的形式，那么该属性可以不用设置；但有时候我们会返回[{“Name”:”tom”,”ID”:”001″},{“Name”:”tom cat”,”ID”:”002″},{“Name”:”tom2″,”ID”:”003″}] 这样的形式，显示的是Name，那么设置该属性为”Name”即可。至于我们想在点击的时候获得点击的项的ID,通过点击事件即可。
itemNumber: 显示的项数目。
isEmptyRequest: focus时，空白是否发起请求。就像前面说的，如果点击搜索框时(此时没有内容)，想要推荐一些内容，设置该属性为true，即会发起请求。
defaultValue: 默认值。通常会是：“请输入关键词…” 这类的提示。
width: 下拉列表宽度。
aligner: 要对齐的元素。
maxHeight: 最大高度。如果设置该高度，超过时就会出现滚动条。
ajax:{
timeout: 超时时间
cache: 是否缓存
},
event:{
setData: 发送请求前触发。用于设置参数
itemClick: 点击项触发
enterKeydown: 按下enter键触发
beforeRender: 所有项呈现前触发
endRender: 所有项呈现后触发
itemBeforeRender: 项呈现前触发
itemAfterRender: 项呈现后触发
beforeSend: 发送请求前触发。用户设置请求头部参数等，相当于jquery ajax 的 beforeSend。
}
event 里的方法都会在适当的时候触发，需要注意的是，所有方法都接收一个参数，该参数是一个对象，有4个属性，某些情况如果没有该属性的，则为空。包括如下属性：
jthis: input 的 jQuery 对象。
jItem: 项的 jQuery 对象。
data: 返回的 json 字符串。如果在前台需要对返回 json 再进行处理，那么可以通过 data 属性获得，处理完成后，需要将 json 字符串 return。
event: 事件对象，如按下 enter 时的事件对象。
C、例子
使用例子：
$("#search").intellSearch({ url:"Handler.ashx", property:"Name", itemNumber:5, isEmptyRequest:false, defaultValue:"请输入关键字...", width:$("#search").width() + 2, maxHeight:-1, event:{ itemClick:function(obj){ alert(obj.item.ID); }, enterKeydown:function(obj){ if(obj.item){ alert("有当前项"); }else{ alert("没有当前项"); } } } });D、总结 如果你还有自己的逻辑需要处理，也支持链式调用，大可以这样写 $(“#search”).intellSearch({参数…}).focus(function(){你的处理…});
分享该插件希望能帮助到有需要的朋友，主要用于学习。由于是v1.0，可能还有一些bug，有发现的朋友也可以告诉我，我会及时修正。
附源代码
js代码
/*搜索智能提示 v1.0 date:2015.09.08 */;(function(w,$){ $.fn.intellSearch = function(options){ var jthis = this; var _dftOpts = { url:"",//请求地址或数组 property:"",//要显示的json对象的属性 itemNumber:5,//显示的条数 isEmptyRequest:false,//focus空白是否发起请求 defaultValue:"",//默认值 width:0,//列表宽度 aligner:jthis,//要对齐的元素 maxHeight:-1,//最大高度 ajax:{ timeout:3000,//超时时间 cache:true//是否缓存 }, event:{ /*参数说明:parameter:{jthis:"jq input",jItem:"jq item",data:"json result",event:"event"}*/ setData:null,//设置参数 itemClick:null,//点击项触发 enterKeydown:null,//按下enter键触发 beforeRender:null,//所有项呈现前触发 endRender:null,//所有项呈现后触发 itemBeforeRender:null,//项呈现前触发 itemAfterRender:null,//项呈现后触发 beforeSend:null//发送请求前触发 } }; $.extend(_dftOpts,options); if(!_dftOpts.url){ throw Error("url不能为空！"); } var jResult; var _value = ""; var _ajax = _dftOpts.ajax; var _event = _dftOpts.event; var _cache = []; var _focusCount = 0;//防止focus触发多次(sogou) /*on window*/ window.intellObj = window.intellObj || {}; /*for global event*/ window.intellDocumentClick = window.intellDocumentClick || function(e){ if(!window.intellObj.jthis){ return; } if(e.target !== window.intellObj.jthis[0]){ setIntellObj(null); } } window.intellDocumentKeydown = window.intellDocumentKeydown || function(e){ var jthis = window.intellObj.jthis; if(!jthis){ return; } var code = e.keyCode; var value = window.intellObj.value; var jResult,jCurItem,keyword; if(code === 13 || code === 38 || code === 40){ jResult = window.intellObj.jResult; jItems = jResult.find("li"); jCurItem = jResult.find("li.cur"); if(code === 13){ if(jCurItem.length > 0){ jCurItem.click(); }else{ setIntellObj(null); if(_event.enterKeydown){ _event.enterKeydown({"jthis":jthis,"event":e}); } } jthis.blur(); }else if(jItems.length > 0){ if(code === 38){ if(jCurItem.length <= 0){ jCurItem = jItems.last(); jCurItem.addClass("cur"); keyword = jCurItem.text(); }else{ var index = jCurItem.index(); jCurItem.removeClass("cur"); if(index <= 0){keyword = value; }else{jCurItem = jItems.eq(index-1);jCurItem.addClass("cur");keyword = jCurItem.text(); } } jthis.val(keyword); }else{ if(jCurItem.length = jItems.length){keyword = value; }else{jCurItem = jItems.eq(index+1);jCurItem.addClass("cur");keyword = jCurItem.text(); } } jthis.val(keyword); } } } } /*event handler*/ $.fn.unintell = function(){ remove(); } $(document).unbind({click:window.intellDocumentClick,keydown:window.intellDocumentKeydown}) .bind({click:window.intellDocumentClick,keydown:window.intellDocumentKeydown}); jthis.focus(function(){ _focusCount++; if(_focusCount > 1){ return; } if(window.intellObj.jthis && jthis !== window.intellObj.jthis){ setIntellObj(null); } var keyword = attrValue(); if(keyword === _dftOpts.defaultValue){ keyword = ""; attrValue(keyword); } if(keyword || _dftOpts.isEmptyRequest){ sendRequest(); } }) jthis.blur(function(){ _focusCount = 0; if(!attrValue()){ attrValue(_dftOpts.defaultValue); } }) jthis.keyup(function(e){ if(e.keyCode === 38 || e.keyCode === 40){ return; } var keyword = attrValue(); if(!keyword){ remove(); window.intellObj.value = _value = ""; return; } if(keyword !== _value){ window.intellObj.value = _value = keyword; sendRequest(); } }); return initBox(); /*function*/ function initBox(){ attrValue(_dftOpts.defaultValue); return jthis; } function initIntell(){ generate(); register(); setIntellObj({jthis:jthis,jResult:jResult}); } function generate(){ var offset = _dftOpts.aligner.offset(); var width = _dftOpts.width ? _dftOpts.width : _dftOpts.aligner.width(); jResult = $("",{"class":"intellResult"}); jResult.width(width).css({"position":"absolute","left":offset.left,"top":offset.top + jthis.outerHeight()}); $("body").append(jResult); if(_dftOpts.maxHeight > 0){ jResult.height(_dftOpts.maxHeight).css("overflowY","scroll"); } } function remove(){ if(jResult){ jResult.remove(); jResult = null; } } function register(){ jResult.on("click","li",function(){ var jItem = $(this); var index = jItem.index(); var keyword = jItem.text(); attrValue(keyword); _value = keyword; if(_event.itemClick){ _event.itemClick({"jthis":jthis,"jItem":jItem,"item":_cache[index]}); } }).on("mouseenter","li",function(){ $(this).siblings("li").removeClass("cur").end().addClass("cur"); }).on("mouseleave","li",function(){ $(this).removeClass("cur"); }); } function setIntellObj(obj){ if(!obj){ if(window.intellObj.jResult){ window.intellObj.jResult.remove(); } window.intellObj.jthis = null; window.intellObj.jResult = null; }else{ window.intellObj.jthis = obj.jthis; window.intellObj.jResult = obj.jResult; } } function sendRequest(){ var data; if(_event.setData){ data = _event.setData({"jthis":jthis}); } $.ajax({ url:_dftOpts.url, data:data, cache:_ajax.cache, timeout:_ajax.timeout, beforeSend:function(xhr){ if(_event.beforeSend){ _event.beforeSend(xhr); } }, success:function(data){ remove(); showData(data); }, error:null }); } function showData(data){ data = $.trim(data) ? $.parseJSON(data) : data; if(_event.beforeRender){ var rs = _event.beforeRender({"jthis":jthis,"data":data}); if(rs === false){ return; } if(rs !== undefined){ data = rs; } } if(!data){ return; } var jItem,jA,jSpan,hasProp,item,text,otherTexts,isRender,index; var list = $.isArray(data) ? data : [data]; var length = list.length; length = length > _dftOpts.itemNumber ? _dftOpts.itemNumber : list.length; if(length <= 0){ return; } initIntell(); _cache.length = 0; hasProp = list[0][_dftOpts.property]; for(var i=0;i 1){ $("",{"text":otherTexts[0]}).insertBefore(jSpan); $("",{"text":otherTexts[1]}).insertAfter(jSpan); }else{ if(index === 0){ $("",{"text":otherTexts[0]}).insertAfter(jSpan); }else{ $("",{"text":otherTexts[0]}).insertBefore(jSpan); } } }else{ jSpan.text(text); } isRender = true; if(_event.itemBeforeRender){ isRender = _event.itemBeforeRender({"jthis":jthis,"jItem":jItem,"item":item}); } if(isRender !== false){ jResult.append(jItem); if(_event.itemAfterRender){ _event.itemAfterRender({"jthis":jthis,"jItem":jItem,"item":item}); } } _cache.push(item); } if(_event.endRender){ _event.endRender({"jthis":jthis}); } jResult.show(); } function attrValue(value){ if(!value && value != ""){ return $.trim(jthis.val()); } jthis.val(value); } function splitText(text,value,index){ var tlength = text.length; var vlength = value.length; if(index === -1){ return null; } if(index === 0){ if(index + vlength >= tlength){ return null; } return [text.substr(index + vlength)]; } if(index + vlength >= tlength){ return [text.substr(0,index)]; } return [text.substr(0,index),text.substr(index + vlength)]; } }})(window,jQuery);样式.intellResult{margin:0;padding:0;background:#fff;border:1px solid #b6b6b6;clear:both;z-index:999;display:none;}.intellResult li{margin:0;padding:0;padding:5px 15px;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;white-space:nowrap;}.intellResult li.cur{background:#E5E0E0;}