Autocompelet rewrite based on jquery UI, auto-complete control, add drop-down option, dynamically set style, click Show All options, and compatible with ie6+

Jquery UI Autocompelete Rewriting Note: The implementation of the function, in addition to the original automatic completion of the content, add a click to display all the options, the style can be set dynamically.

The source of the loaded data is read from the background database.

The specific code is as follows:

Reference

Download the plugin package address from the official
http://jqueryui.com/download/
I only choose AutoComplete this, the other tools do not have to be checked, the last choice is ready to download.

The requirement is that the jquery version is relatively high, I use the 1.11 version, the official download contains demo demo, also with jquery package.
The order of reference is as follows, two JS sequence can not be confused.

<link rel="stylesheet" href="./jqueryui/cs/jquery-ui.css" /><script src="./jqueryui/js/jquery.js"></script><script src="./jqueryui/js/jquery-ui.js"></script>

Example of a principal content reference official

    <div id= "div" style= "Height:260px;width:300px;overflow:auto;background-color:gainsboro;" > </br> 

More than one split point is added to allow the control to display properly on the page with scrollbars and scroll along with the scroll bar.
The Easyui control ComboBox cannot achieve this effect, always floating on the top level.

JS Section Code:

var availabletags = ["ActionScript", "AppleScript", "ASP", "BASIC", "C", "C + +", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "G Roovy "," Haskell "," Java "," JavaScript "," Lisp "," Perl "," PHP "," Python "," Ruby ", "Beta yes", "test"];//json Format data: var Availabletagsjson = [{label: "C # Language", Value: "C #"}, {label: "C + + Language", value: "C + +"}, {label: "java Language", Value: "Java"}, {label: "Jav Ascript Language ", Value:" JavaScript "}, {label:" ASP. ", Value:" ASP. "}, {label:" JSP ", Value:" JSP "}, {label: "PHP", Value:"PHP"}, {label: "Python", Value: "Python"}, {label: "Ruby", Value: "Ruby"}];$ ("#autocomplete"). AutoComplete ({ Autofocus:true, source:availabletags});//Click the drop-down image to achieve the display of all options contents $ (' #test_btn '). On (' click ', function () {if ($ ("#aut Ocomplete "). AutoComplete (" widget "). Is (": visible ")) {$ (" #autocomplete "). AutoComplete (" close "); Return } $ (this). blur (); $ ("#autocomplete"). AutoComplete (' Search ', '); $ ("#autocomplete"). focus ();});

The corresponding CSS styles are:

.ui-autocomplete { max-height: 100px; overflow-y: auto; /* 防止水平滚动条 */ overflow-x: hidden; } input,img{ vertical-align:middle} /* IE 6 不支持 max-height * 我们使用 height 代替，但是这会强制菜单总是显示为那个高度 */ * html .ui-autocomplete { height: 100px; } .autoSpan{ position:relative; } .imgUI{ position:absolute; left:112px; }

Where the picture This is a downward arrow
Give the dynamic OnClick method so that it can trigger the AutoComplete drop-down display for all options.

$("#autocomplete").autocomplete(‘search‘,‘‘);This section is for the control to display all the contents of the
And the ", I use the time to add a space, the official document is not added, but to cooperate with the background data.
Add a space, in the background to return the JSON format data, the beginning or end of the label with a space,
You can retrieve all of the data.

The front-end code can also complement the dynamic display style, as follows:

//封装的调用后台的方法，这里就不适合其他项目了var jsonstr = get(‘/QrySelectAction‘,{typeName:code});var obj = JSON.parse(jsonstr);//json内容大致为：//[{"label": "博客园", "value": "cnblogs","id":"id"},//{"label": "白兰", "value": "白兰","id":"id"}]$(‘#‘+code).autocomplete({ autoFocus: true, source: obj, select: function(e, ui) { //选择后增加一个属性值来存第三个id $(this).attr(‘data-id‘,ui.item.id);//为了获取到这个控件的id值多增加一个data-id属性 }, create: function( event, ui ) { // event 是当前事件对象 // ui对象是空的，只是为了和其他事件的参数签名保持一致 $(this).val(obj[0].label); var width = $(this).width();//获取当前控件的高度 if(width>127){ var rew = width-127+112; $(this).parent().find(‘img‘).css(‘left‘,rew+‘px‘);//设置下拉按钮的相对位置 } }});

The backend code uses the query database to return the corresponding json.tostring, and then the front-end with ~Json.parse (jsonstr); ~
Converted to JSON format for AutoComplete to be read.

Background note in the spelling of the value of the label, more than one space, so that the front-end selection to click on the display of all the content to use.

Suggest_btn.gif

The final effect is as follows:


Autocompelet rewrite based on jquery UI, auto-complete control, add drop-down option, dynamically set style, click Show All options, and compatible with ie6+