Select that can be entered or pulled down

We know that the general Select drop-down box is optional and cannot be used to enter content. And sometimes we encounter a drop-down box with no information to select or a drop-down option, we can make the select text, allow the user to enter the desired content, and also list the items that contain the keywords as they are entered for quick selection.

View Demo Download source code

This article will share with you an example of a jquery-based drop-down box plug-in that allows the user to enter content, while the drop-down option will match the relevant options in a timely manner, support keyboard operations, support HTML options, and, of course, make the drop-down process animated. Let's see how it's used.

HTML structure

The following is a basic Select drop-down box.

<selectId="Editable-select">
<option>alfa Romeo</OPTION>&NBSP; 
     >audi</OPTION>&NBSP; 
      <option> People's Bank of China </OPTION>&NBSP; 
     <option> Chinese people </OPTION>&NBSP; 
     < Span class= "Html__tag_start" ><option> China </ option>  
     <option >bmw</OPTION>&NBSP; 
 </SELECT>&NBSP; 
          

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

Jquery

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

$(‘#editable-select‘).editableSelect({ 
    effects: ‘slide‘ 
}); 

In fact, we look at the plugin code will find that the author is the original select processed under, into an input form text and a list of UL. This text can be entered, drop-down options with the UL panel, so the UL option can add any HTML code, the demo has an example. Then through the use of CSS and JS technology can be implemented drop-down popup, input find matching function.

Option settings

Filter: Filtering, that is, when the drop-down option matches input characters, supports Chinese, true/false, and defaults to true.

effects: Animation effect, when the drop-down box that triggers the pop-down selection box shows the transition effect, there are default,slide,fade three values, default.

Duration: The drop-down Options box shows the transition animation speed, with Fast,slow, and the number (milliseconds), which by default is fast.

Event

onCreate: triggered when input.

onshow: Triggered at the moment of pull.

onhide: Triggered when the dropdown 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!"); 
    } 
}); 

In addition, keyboard direction keys, enter, TAB, and ESC keys are also supported.

JQuery Editable Select Project Official website address: Https://github.com/indrimuska/jquery-editable-select

Original link: http://www.helloweba.com/view-blog-348.html

Select that can be entered or pulled down