GOOCODE - Find your code/scripts

21 We know that the general select drop-down box is only selected, can not be used to enter the content. Sometimes we will encounter the drop-down box does not have to select the information item or drop-down options for a long time, we can let select into text, allowing users to enter the desired content, but also can be included in the importation of key words Also listed for quick selection.


This article will use examples to share with you a jQuery-based drop-down box plug-in, which allows users to enter the content, while the drop-down options will match the relevant options in time to support the keyboard operation, also supports html option, of course, the process of pulling down the band There are animation effects. We look at how to use.

HTML structure
The following is a basic select drop-down box.

<select id="editable-select" class="form-control">
    <option>Alfa Romeo</option>
    <option>Audi</option>
    <option>BMW</option>
    <option>Citroen</option>
    <option>Fiat</option>
    <option>Ford</option>
    <option>Jaguar</option>
    <option>Jeep</option>
    <option>Lancia</option>
    <option>Land Rover</option>
    <option>Mercedes</option>
    <option>Mini</option>
    <option>Nissan</option>
    <option>Opel</option>
    <option>Peugeot</option>
    <option>Porsche</option>
    <option>Renault</option>
</select>

In addition to the need to load the jQuery library and jquery.editable-select.js file in the source download package already.

JQuery
Only the following code will be able to achieve the traditional drop-down box into a drop-down box of the 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 handle, into an input form text and a list ul. This text can be input, the drop-down option is to use ul panel, so that the option ul can add any html code, demo in the example. And then through the use of CSS and js technology can achieve drop-down pop-up, enter the search matching function.

Option settings
Filter: filter, that is, when you enter the contents of the drop-down options will match the input characters, support for Chinese, true / false, the default true.
Effects: animation, when the trigger pop-up drop-down box when the drop-down box shows the transition effect, there are default, slide, fade three values, the default is default.
Duration: drop-down box shows the transition animation speed, there are fast, slow, and digital (milliseconds), the default is fast.
event
OnCreate: Fires when input.
OnShow: Triggered when pulldown.
OnHide: Triggered when the drop-down box is hidden.
onselect: Fires when the option in the drop-down box is selected.
Event call method:

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

In addition, also supports keyboard arrow keys, the Enter key, Tab key and Esc key operation.
JQuery Editable Select Project Website: https://github.com/indrimuska/jquery-editable-select