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

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

1. Directly use h5’s new tag fc86e7b705049fc9d4fccc89a2e80ee3, 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>

Advantages: Savings js code;

Disadvantages: IE 9 and below and Safari do not support the fc86e7b705049fc9d4fccc89a2e80ee3 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>

js part of the code is as follows:

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

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:

ee4c45cf54483bcbeeb7b38dff558a3216b28748ea4df4d9c2150843fecfba68

js part code is as follows:

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

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 221f08282418e2996498697df914ce4e tag. Here I personally recommend the chosen plug-in (chosen.css and chosen.js need to be introduced at the same time). The html part of the code is as follows:

<select data-placeholder="Type &#39;C&#39; to view" style="width:100%" class="myselect chosen-select-no-results" tabindex="10">
 <option value=""></option>
 <option>American Black Bear</option>
 <option>Asiatic Black Bear</option>
 <option>Brown Bear</option>
 <option>Giant Panda</option>
 <option>Sloth Bear</option>
 <option>Sun Bear</option>
 <option>Polar Bear</option>
 <option>Spectacled Bear</option>
</select>

The js part of the code is as follows ：

var config = {
　　'.chosen-select':{},
　　'.chosen-select-deselect':{allow_single_deselect:true},
　　'.chosen-select-no-single':{disable_search_threshold:10},
　　'.chosen-select-no-results':{no_results_text:'Oops, nothing found!'},
　　'.chosen-select-width':{width:"95%"}
}
for (var selector in config) {
　　$(selector).chosen(config[selector]);
}

Note: If used in conjunction with bootstrap's Modal modal box, the drop-down list will not be displayed. At the same time, a scroll bar will appear on the right side of .modal-body. The reason is that bootstrap gives .modal-body A default style of overflow-y:auto is set, so the solution is to add an overflow-y:visible style to .modal-body to override it.