Js implementation can be input drop-down select

We know that the select drop-down box can only be selected and cannot be used to input content. Sometimes, when there are no information items to select in the drop-down box or many drop-down options, we can convert select to text, allowing users to enter the desired content, you can also list the items that contain keywords during input for quick selection.

 

This article will use examples to share with you a jQuery-based drop-down box plug-in that allows users to enter content, and the drop-down options will match relevant options in a timely manner, supporting keyboard operations, html options are also supported. Of course, the drop-down process can be animated. Let's take a look at how to use it.

HTML structure

Below is a basic select drop-down box.

<Select id = "editable-select">
<Option> Alfa Romeo </option>
<Option> Audi </option>
<Option> People's Bank of China </option>
<Option> chinese people </option>
<Option> China </option>
<Option> BMW </option>
</Select>

In addition to the need to load the jQuery library and jquery. Editable-select.js file, in the source code download package already has.
JQuery

You only need the following code to change the traditional drop-down box to a drop-down box with the input function.

$ ('# Editable-select'). editableSelect ({
Effects: 'slide'
});

In fact, after looking at the plug-in code, we will find that the author processes the original select statement and converts it into an input form text and a list ul. In this way, text can be entered, and the drop-down options can be ul panel. In this way, any html code can be added to the options in ul. There is an example in the demo. Then, you can use CSS and js technologies to implement the drop-down pop-up and input search and matching functions.
Option settings

Filter: filter. When the input content is pulled, the option matches the input characters. The options include Chinese, true, and false. The default value is true.
Effects: specifies the animation effect. When a drop-down selection box is triggered, the drop-down box displays the transition effect. The options include default, slide, and fade. The default value is default.
Duration: The Transition animation speed shown in the drop-down box, including fast, slow, and number (MS). The default value is fast.
Event
OnCreate: triggered when input.
OnShow: triggered when a drop-down occurs.
OnHide: triggered when the drop-down box is hidden.
OnSelect: triggered when the options in the drop-down box are selected.
Event call method:

$ ('# Editable-select'). editableSelect ({
OnSelect: function (element ){
Alert ("Selected! ");
    }
});

In addition, the keyboard direction keys, Enter keys, Tab keys, and Esc keys are supported.