jQueryUI Study notes-auto-complete AutoComplete

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>insert title here</title>
<link rel= "stylesheet" href= "Http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css" >
<style type= "Text/css" >
. ui-autocomplete-category {
Font-weight:bold;
padding:. 2em. 4em;
margin:. 8em 0.2em;
line-height:1.5;
}
</style>
<script src= "Http://code.jquery.com/jquery-1.9.1.js" ></script>
<script src= "Http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>
<script type= "Text/javascript" >
Extend the AutoComplete component, override the AutoComplete _rendermenu method, and display the prompt entry in categories
$.widget accepts three parameters, the first parameter is the name of the new component, which must start with custom. The name of the new component is the same as the one that is called or initialized in the same way as AutoComplete
The second parameter is the extended or overridden component, here is the $.ui.autocomplete, the auto-complete component
The third parameter is the object, which contains the overridden property or method, which overrides the _rendermenu method
$.widget ("Custom.catcomplete", $.ui.autocomplete, {
This method is called before rendering the drop-down list and can be modified to achieve the purpose of classifying the options
The incoming UL parameter is the parent container for the option, which can be added to the container
The incoming items parameter is the list of data that will be displayed
_rendermenu:function (UL, items) {
var = this;
Currentcategory = "";
Traversing the items object array and classifying them, this method must ensure that the same category of data is put together.
$.each (items, function (index, item) {
if (item.category! = currentcategory) {
Ul.append ("<li class= ' ui-autocomplete-category ' >" + item.category + "</li>");
Currentcategory = item.category;
}
That._renderitemdata (UL, item);
});
}
});
It is important to extend the ComboBox component so that it can support auto-complete function!!!
$.widget ("Custom.combobox", {
I guess this method should be called when the component was created, and it is also proven, that is, $ ("#combobox"). ComboBox (); this sentence
_create:function () {
Console.log ("Call _create");
This.wrapper = "";
}
});
</script>
<script type= "Text/javascript" >
$ (function () {
var availabletags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C + +", "Clojure", "COBOL",
"ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP",
"Python", "Ruby", "Scala", "Scheme");
var objects = [{
Label: "America",
Value: "United States"
}, {
Label: "China",
Value: "China"
}, {
Label: "Japan",
Value: "Japan"
} ];
var categories = [{
Label: "Anders",
Category: ""
}, {
Label: "Andreas",
Category: ""
}, {
Label: "Antal",
Category: ""
}, {
Label: "ANNHHX10",
Category: "Products"
}, {
Label: "Annk K12",
Category: "Products"
}, {
Label: "Annttop C13",
Category: "Products"
}, {
Label: "Anders Andersson",
Category: "People"
}, {
Label: "Andreas Andersson",
Category: "People"
}, {
Label: "Andreas Johnson",
Category: "People"
} ];
var autocomplete = $ ("#tags"). AutoComplete ({
Sets the data source for the auto-complete input box, which can be an array of strings, an array of objects, or a URL string (returning a JSON data)
In the case of an array of objects, each object can have two properties, and the label and Value,label represent the values displayed, and value represents the values that are filled in the input box when selected, and the data filter is the filter label
source:availabletags,//Why is it not possible to filter data based on user input after the URL is set, and the object array in the file cannot be automatically prompted?
The Auto-prompt box automatically filters the strings that match the criteria based on the characters entered by the user, and the default filter rule is that the entire string content contains the user-entered characters that meet the criteria and can modify this default behavior
If the source is set to function, the function has two parameters, the first parameter can get the character entered by the user, the second parameter is a function, call the function and pass in an array, the array is the preceding array, but not the URL, Because calling the response function is not going to help us request again.
Source:function (Request, Response) {
Console.log ($.ui.autocomplete.escaperegex (request.term));
Create a regular expression, the $.ui.autocomplete.escaperegex method is that the special characters in the string can be treated as ordinary characters, that is, if the incoming "[]", after processing returns "\[\", is actually added an escape character
The second argument "I" indicates that the regular expression ignores case comparisons
var matcher = new RegExp ("^" + $.ui.autocomplete.escaperegex (request.term), "I");
The $.grep method can be seen as a method of filtering array elements, rejecting elements that are not eligible in the array
The first parameter is the source array, the second parameter is a callback function, the argument is an array of each item, if the method returns True, the element is added to the destination array, otherwise it is filtered
Response ($.grep (availabletags, function (item) {
return Matcher.test (item);
}));
},
This configuration item does not know what to do ...
AppendTo: "Body",
Can be set to TRUE or False
If set to True, auto-focus to the first item of the list when the drop-down list is displayed
If set to false, when the drop-down list is displayed, it will not auto-focus, default to False
Autofocus:true,
Sets the delay time in the drop-down list, in milliseconds, the default value is 300
DELAY:100,
Set the disable state of the auto-complete box, true to disable, false to enable
Disabled:false,
Set the minimum number of characters for the search, that is, enter at least minlength characters before going to match the hint.
Data can be set to 0, but if there are too many data, there are thousands of, you need to use this limit to filter the data
Minlength:1,
Sets the position of the drop-down list relative to the auto-complete input box
Position: {
Sets the anchor point of the drop-down list, that is, the At property takes this point as a reference, setting the position of the drop-down list relative to the input box
The first value is the horizontal direction, optional left,right,center
The second value is in the vertical direction and optional left,right,center
my: "Left Top",
Set relative position
At: "Left Bottom"
},
Extension point, do not know what to do, did not see the call, should not be so used
_renderitem:function (UL, item) {
Alert ("_renderitem");
Return $ ("<li>"). attr ("Data-value", Item.value). Append ($ ("<a>"). Text (Item.label)). APPENDTO (UL);
},
Extension point, do not know what to do, did not see the call, should not be so used
_rendermenu:function (UL, items) {
var = this;
$.each (items, function (index, item) {
That._renderitemdata (UL, item);
});
$ (UL). Find ("Li:odd"). AddClass ("odd");
},
Extension point, do not know what to do, did not see the call, should not be so used
_resizemenu:function () {
This.menu.element.outerWidth (500);
},
This event is triggered when the content of the text box has been modified and loses focus, or it can be bound to a prompt by using a binding method
Autocomplete.on ("Autocompletechange", function (Event,ui) {});
Ui.item represents the object of the item you selected, including the label and Value property, if Ui.item is not selected as null
Change:function (event, UI) {
if (Ui.item = = null) {
Console.log ("No Choose");
} else {
Console.log ("Choose" + ui.item.value);
}
},
This event is triggered when the smart cue box is closed and the UI is an empty object
Close:function (event, UI) {
Console.log ("close");
},
Callback this method when auto-complete component creation, UI is empty object
Create:function (event, UI) {
Console.log ("create");
},
This event is triggered when an item in the prompt list gets focus, where Ui.item is the one that receives the focus
The value in the text box is updated only when you use the keyboard to select an item, and the value of the text box is not updated with the mouse, but this event is triggered
Focus:function (event, UI) {
Console.log ("Focus:" + Ui.item.value);
},
This event is triggered when the prompt list is opened and the UI is an empty object
Open:function (event, UI) {
Console.log ("open");
},
After the search event is triggered, this event is triggered before the list is displayed, where ui.content is the content that is about to be displayed in the list, has been normalized, and is an array of objects containing the label and value
Response:function (event, UI) {
Console.log ("Content length:" + ui.content.length);
Add an index to the label property of each object, use the $.each () method to iterate over an array of objects, the first parameter is an array, the second parameter is the callback method, the method is recalled once per traversal of an object, the first parameter of the method is an index, the second argument is an object, If the method returns false, the step jumps out of the traversal, and if true, continues the next object traversal.
$.each (ui.content, function (i, obj) {
Obj.label + = i;
if (i = = 5) {
return false;
}
});
},
After the minlength is satisfied, delay will trigger the event first, the specific role is unknown, the incoming UI is an empty object
Search:function (event, UI) {
Console.log ("search");
},
This event is triggered when a certain image in the list is selected, and the parameter is the same as focus
Select:function (event, UI) {
Console.log ("Select:" + ui.item.value);
Event.preventdefault (); Use this function to block the default behavior of an event, such as the default behavior of selecting an item is to update the value of the text box, and if the method is called, the value of the text box is not updated. However, you cannot prevent the list from shutting down.
}
});
$ ("#close"). button (). Click (function () {
Autocomplete.autocomplete ("close");//close smart Cue box
});
$ ("#destroy"). button (). Click (function () {
Autocomplete.autocomplete ("destroy");//Destroy the smart cue box, the input box will no longer have the hint function
});
$ ("#disable"). button (). Click (function () {
Autocomplete.autocomplete ("Disable");//Disable smart cue box, the input box will no longer have the hint function
});
$ ("#enable"). button (). Click (function () {
Autocomplete.autocomplete ("Enable");//Enable smart cue box, the input box will no longer have the prompt function
});
$ ("#isDisabled"). button (). Click (function () {
var isdisabled = autocomplete.autocomplete ("option", "Disabled");//Gets the status of whether smart hints are disabled
Console.log ("isdisabled:" + isdisabled);
});
$ ("#option"). button (). Click (function () {
var option = autocomplete.autocomplete ("option");//Get Smart Cue box all configuration information
var optionstr = "";
Traversing configuration information
For (var p in option) {
Optionstr + = p + ":" + option[p] + "\ n";
}
Console.log ("option:\n" + optionstr);
});
$ ("#setDelay"). button (). Click (function () {
Autocomplete.autocomplete ("option", "Delay", 2000);//Set drop-down list delay time is 2s
});
$ ("#search"). button (). Click (function () {
After the call will trigger the search event, you can set the callback method, the practice proves that can not trigger the Search event callback method, funk, what is the function of this method?
Autocomplete.autocomplete ("Search", "");
});
Creating Catcomplete Components
$ ("#catcomplete"). Catcomplete ({
Source:categories
});
Creating a ComboBox Component
var combobox = $ ("#combobox"). ComboBox ();
Iterate through the properties and methods of the ComboBox object
var optionstr = "";
For (Var p in ComboBox) {
Optionstr + = p + "\ n";
}
Console.log (OPTIONSTR);
});
</script>
<body>
<div class= "Ui-widget" >
<label for= "tags" >autocomplete: </label> <input id= "tags"/>
</div>
<!--
<button id= "Close" > Close smart Cue box </button>
<button id= "destroy" > Destroy smart Alert box </button>
<button id= "Disable" > Disable Smart Tips </button>
<button id= "Enable" > Enabling Smart Tips </button>
<button id= "isdisabled" > Get Smart Tips whether to disable state </button>
<button id= "option" > Get Smart Cue box all configuration information </button>
<button id= "Setdelay" > set list delay Time </button>
<button id= "Search" > Trigger Search Events </button>
-
<div class= "Ui-widget" >
<label for= "Catcomplete" >catcomplete: </label><input id= "Catcomplete"/>
</div>
<div class= "Ui-widget" >
<label>your preferred programming Language: </label> <select id= "ComboBox" >
<option value= "" >select one...</option>
<option value= "ActionScript" >ActionScript</option>
<option value= "AppleScript" >AppleScript</option>
<option value= "ASP" >Asp</option>
<option value= "BASIC" >BASIC</option>
<option value= "C" >C</option>
<option value= "C + +" >C++</option>
<option value= "Clojure" >Clojure</option>
<option value= "COBOL" >COBOL</option>
<option value= "ColdFusion" >ColdFusion</option>
<option value= "Erlang" >Erlang</option>
<option value= "Fortran" >Fortran</option>
<option value= "Groovy" >Groovy</option>
<option value= "Haskell" >Haskell</option>
<option value= "Java" >Java</option>
<option value= "JavaScript" >JavaScript</option>
<option value= "Lisp" >Lisp</option>
<option value= "Perl" >Perl</option>
<option value= "PHP" >PHP</option>
<option value= "Python" >Python</option>
<option value= "Ruby" >Ruby</option>
<option value= "Scala" >Scala</option>
<option value= "Scheme" >Scheme</option>
</select>
</div>
<button id= "Toggle" >show underlying select</button>
</body>

jQueryUI Study notes-auto-complete AutoComplete