How to implement select that can be entered or selected by drop-down

This article is about how to implement select, which can be entered or dropped down. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

HTML structure

Below is a basic select drop-down box.

Alfa Romeo Audi People's Bank of China People's China BMW

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

jQuery

Just need the following code to implement the traditional drop-down box into a drop-down box with input function.

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

In fact, if we look closely at the plug-in code, we will find that the author has processed the original select into an input form text and a list ul. In this way text can be entered, pull-down options are used ul panel, so that the options in ul can add any html code, demo has an example. Then through the use of CSS and JS technology can be achieved drop-down pop-up, input to find matching functions.

option is set

filter: filter, i.e. the drop-down option matches the input characters when the content is input, supports Chinese, true/false, default true.

effects: animation effect, when the drop-down selection box is triggered, the drop-down box displays the transition effect, there are default, slide, fade three values, default is default.

duration: The transition animation speed displayed in the drop-down option box is fast, slow, and a number (milliseconds). The default is fast.

event

onCreate: Triggered when entered.

onShow: Triggered when pulled down.

onHide: Triggers when the drop-down box is hidden.

onSelect: Triggered when an option in the drop-down box is selected.

Event invocation method:

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

In addition, keyboard arrow keys, Enter key, Tab key and Esc key operations are also supported.

jQuery Editable Select Project Website Address: github.com/indrimuska/jquery-editable-select

Thank you for reading! About "how to realize the select that can be input or drop-down selection" this article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!