The select drop-down based on jQuery can be input for source code download, jqueryselect

The select drop-down based on jQuery can be input for source code download, jqueryselect

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.

View demo source code download

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!"); } }); 

The above content shares with you the core code. If you need the source code, you can download it directly.

Articles you may be interested in:

• Asp select drop-down menu select icon and display in real time
• Input + select (multiple) Implement the input values in the drop-down box
• Select drop-down box beautification implementation code (js + css + image)
• Jquery deselect select drop-down box sample code
• Js automatically searches for the select drop-down menu and selects (sample code)
• A good example of Ctrip's Custom Data drop-down, select
• Js Implementation of Select drop-down box with Input Function Method
• Example of a 5-level linkage Select drop-down selection box implemented by JS
• JQuery implements a very practical and beautiful select drop-down menu selection effect