Implementation of select Dropdown based on jquery select optional source download _jquery

As we know, the General Select dropdown box is only selectable and cannot be used to enter content. And sometimes we encounter a drop-down box with no information items to select or Drop-down options for a very long time, we can let select into text, allowing users to enter the desired content, but also in the input when the keyword will be included in the list, for quick selection.

View Demo effect Source download

This article will use an example to share a jquery based on the dropdown box plug-in, which allows users to enter content, while the Drop-down options in time to match the relevant options, support keyboard operations, but also support the content of HTML options, of course, can make the process with the Drop-down animation effect. Let's take a look at how to use.

HTML structure

The following is a basic select Drop-down box.

<select id= "Editable-select" > 
<option>alfa romeo</option> 
<option>audi</ Option> 
<option> PBC </option> 
<option> Chinese people </option> 
<option> China </option> 
<option>BMW</option> 

Also need to load jquery library and Jquery.editable-select.js files, in the source download package already have.

Jquery

Only the following code is required to implement the traditional dropdown box into a drop-down box with input function.

$ (' #editable-select '). Editableselect ({ 
effects: ' Slide ') 

In fact, we look at the plug-in code will find that the author is the original select processing, into a single input form text and a list of UL. This text can be entered, the dropdown option is used with the UL panel, so that the UL option can add arbitrary HTML code, demo has examples. Then through the use of CSS and JS technology can achieve Drop-down pop-up, input lookup matching function.

Option settings

Filter: Filtering, that is, when the input content of the pull option will match the input characters, support Chinese, true/false, default true.
Effects: Animation effect, when triggered pop-up drop-down selection box when the Drop-down box to show the transition effect, there are default,slide,fade three values, defaults to default.
Duration: The transition animation speed shown in the dropdown box, with Fast,slow, and number (milliseconds), is fast by default.

Event

OnCreate: triggered when input.
OnShow: Triggers when the current pull.
Onhide: Triggers when the Drop-down box is hidden.
Onselect: triggered when the option in the Drop-down box is selected.

Event Invocation Method:

$ (' #editable-select '). Editableselect ({ 
onselect:function (element) { 
alert ("selected!"); 
} 

The above content to share the core code, need the source of friends can directly download oh.