jQuery plug-in implements input and automatic matching drop-down box-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jQuery plug-in implements input and automatic matching drop-down box

高洛峰

Dec 09, 2016 am 11:46 AM

jquery

To implement input + drop-down box with automatic matching function, I have tried the following methods:

1. Directly use h5’s new tag , the corresponding demo is as follows:

<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

Copy after login

Advantages: Savings js code;

Disadvantages: IE 9 and below and Safari do not support the tag (it seems that several browsers do not support it either); repeatedly clicking the input box or drop-down icon does not restore the drop-down list ; The style is difficult to control

2. Use the jQuery-based select2 plug-in (select2.css and select2.js need to be introduced at the same time), the html part of the code is as follows:

<select class="select2_test" >
 <option></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>

Copy after login

js part of the code is as follows:

$(&#39;.select2_test&#39;).select2({
 placeholder: "请选择所属选项",
 allowClear: true;
});

Copy after login

Note: When used in combination with bootstrap's Modal modal box, there will be a problem that the drop-down list appears at the bottom of the mask layer and the pop-up box close button is clicked but the drop-down list does not disappear. After searching for a long time, it turns out that the problem lies in select2.css In this style sheet,

Reason: Click the input box, this plug-in will generate a mask layer (class name .select2-drop-mask) and a drop-down list (class name .select2-drop), both of which The cascading (z-index) is 9991, 9992, but the cascading of the modal pop-up box is greater than 10000, so the above two problems will occur

Solution: If .select2-drop-mask and .select2-drop The z-index is increased to 19991 and 19992 respectively, and the drop-down list is successfully displayed on it. However, if you click the close button of the modal pop-up box with the drop-down list open, the drop-down box will be retracted first, and you can click it again to close the pop-up window. The user experience is not Very good; here you can try to increase the z-index of the close button, provided that the parent element cannot be a modal pop-up box, otherwise the increased z-index will be invalid.

3. The main reason for the above discomfort of select2.js is that the loss of focus of select2-drop can only be triggered by clicking on select2-drop-mask. In order to improve this mechanism, here is another drop-down search box based on jQuery. Plug-in magicsuggest (need to introduce magicsuggest.css and magicsuggest.js at the same time), the html part is very simple, directly:

js part code is as follows:

$(&#39;#magicsuggest&#39;).magicSuggest({
　　placeholder:&#39;&#39;，
　　allowFreeEntries: false,
　　maxSelection:1,
　　autoSelect:true,
　　valueField:"id",
　　displayField:"value",
　　resultAsString:true,
　　selectionStacked: true,
　　highlight:false,
　　data: [&#39;Paris&#39;, &#39;New York&#39;, &#39;Gotham&#39;]
});

Copy after login

Advantages: There will be no cascading conflicts; beautiful styles; multiple selections allowed

Disadvantages: There are many redundant styles (shadow, highlight, error prompt, multiple selection), which need to be adjusted according to specific needs Style; the value of the original input box cannot be obtained directly through $(this).val(); when the amount of data is too large, there will be a delay in loading

4. Since the default plug-in above is a multi-select style, use it in the project It is also not possible to directly obtain the value in the