Input multiple-selection dropdown implementation method for UI components (with search function) _jquery

My style, first on the effect of the picture, if you feel good, please refer to the implementation code.

Let's just look at the div hierarchy.

<!--outermost Div can be arbitrarily specified primarily to define the child element width-->
<div class= "col-xs-10" style= "width:800px" >
<!--form label Add text hint-->
<label for= "" class= "Label-control" > Full-Text Search </label>
<!--multiple-select take div will dynamically add span >
<div class= "Hint-input-span-container" >
<!--form elements are used to bind listening events and receive user input dynamically adding spans above the layer-->
<input type= "text" name= "Hint-search" value= "placeholder=" Select the keyword or press TAB or press ENTER to split the keyword ">
</div>
<!--contains drop-down list columns-->
<div class= "Hint-block" >
<!--dynamically add Li--> based on JSON packets
<ul class= "Hint-ul" >
</ul>
</div>
</div>

DOM structure annotations are already clear, and here's a look at CSS

* {Box-sizing:border-box;} hint-input-span-container {width:100%; Background-color: #fff; border:1px solid #ccc; bo
X-shadow:inset 0 1px 1px rgba (0, 0, 0, 0.075);
Display:inline-block;
PADDING:2PX 4px;
Color: #555;
Vertical-align:middle;
border-radius:1px;
max-width:100%;
line-height:30px; }. Hint-input-span-container. Tag {padding: -2px; font-size:12px; font-family:serif;; margin-right:2px; margin-top:2p
X
margin-bottom:2px;
Display:inline-block; }. label {font-size:10px; padding:4px 6px; Border:none text-shadow:none; border-radius:3px; font-weight:200;}. LA bel-primary {background: #2693FF; color:white} hint-input-span-container span i[data-role= ' remove '] {Cursor:pointer
; } tag {margin-right:2px; color:white; tag [data-role= "Remove"] {margin-left:2px; cursor:pointer;} input[name= ' H  Int-search '] {border:none; box-shadow:none; outline:none; background-color:transparent; padding:0; margin:0; width:
100%;
Max-width:inherit; }. Hint-block {position:absolute; width:100px; max-height:120px; Background-color: #fff; overflow:auto; display:none; Z-index:
9999;  }. hint-ul {text-decoration:none; list-style-type:none; padding-left:5px; Hint-ul li{font-size:14px
4px; }. Hint-ul li:hover{background-color: #eee;}

It is important to set border-sizing:border-box in CSS, which allows padding and border to be computed in width

. Hint-input-span-container setting display as Inline-block is also very important, there is the arrangement of tag

. Hint-block set Z-index to 9999 guaranteed to appear at the front end, while position for absolute to ensure its location

Everything else can be adjusted to suit your needs.

Here's a look at the JS code

$ (function () {//json packet var data = {data:["123", "Beijing Hello," Welcome to Beijing "," Beijing Good "," Ocean "," Ocean Guang Li "," I Ocean "," I am surprised "," I la la la la "," I Can't endure "," organization ","
Japan "," Russia's Mountains "," Ethiopia "," Paraiba card "," Bibibi "]};
Gets the DOM object var $hintSearch = $ ("Input[name= ' Hint-search") that needs to be called multiple times later;
var $hintSearchContainer = $ (". Hint-input-span-container");
var $hintBlock = $ (". Hint-block");
var $hintUl = $ (". Hint-ul");
The first invocation adds a dictionary adddictionary (Data.data,addullistener);
Sets the dictionary list width sethintsearchcontainerwidth ();
Implement responsive listener Resize event $ (window). Bind (' resize ', sethintsearchcontainerwidth);
Get Focus $hintSearch. Focusing (function () {Animtedown ();});
Loss of focus//set delay in order to be able to monitor the response of the Click $hintSearch. blur (function () {settimeout (function () {animateup ();},200);});
tab and enter event//Listener tab and enter two keys if input is entered in input, add span//Note the last thing to stop the event bubbling prevents jump and toggle Focus $hintSearch. KeyDown (function (e) {
Switch (E.which) {case 9:case 13:{var text = $hintSearch. val (); if (!$.trim (text) {$hintSearch. val ("");
E.preventdefault ();
Return } if (!checkcontainerhas (text)) {$hintSearch. Before (' <span class= ' tag lAbel Label-primary "> ' + text + ' <i class=" fa fa-times "data-role=" Remove "></i><i> </i>
</span> ');
Addspanlistenr ();
}//console.log ($hintSearch. Val ());
$hintSearch. Val ("");
$hintSearch. focus ();
E.preventdefault ();
Break
} default:;
}
}); Detect input pairing//match input in Li if the containing string can be found and the return//search method can be modified by itself, $hintSearch. KeyUp (function (e) {var text = $
Hintsearch.val (); if (!$.trim (text)) {updatedictionary (data.data,addullistener);} var Tmparr = Data.data.filter (function (x) {return
X.indexof (text)!=-1;
}) if (tmparr.length = = 0) {Tmparr.push ("no match Entries");} updatedictionary (Tmparr,addullistener); //function library//Add user common dictionary function adddictionary (Dataarr, callback) {for (var i = 0; i < dataarr.length; i++) {$hintUl. AppE
nd (' <li> ' + dataarr[i] + ' </li> ');
} callback (); //Update Search content function Updatedictionary (dataarr,callback) {$hintUl. empty (); Adddictionary (dataarr,callback);}//Slide down animation/ /encapsulation Change style border function Animtedown () {$hintBlock. Slidedown (' fast ')). css ({' Border ': ' 1px solid #96C8DA ', ' border-top ': ' 0px ', ' box-shadow ': ' 0 2px 3px 0 rgba (34,36,38,.15) '}); $hintSearchContainer. css ({' Border ': ' 1px solid #96C8DA ', ' border-bottom ': ' 0px ', ' box-shadow ': ' 0 2px 3px 0 rgba (34,36,38
,. 15) '}); ///Slide up animation function animateup () {$hintBlock. Slideup (' Fast ', function () {$hintSearchContainer. css ({' Border ': ' 1px solid
#ccc '});
}); //Check for duplicate function Checkcontainerhas (text) {var flag = 0; $ (". Hint-input-span-container span"). each (function () {if (
$.trim (text) = = $.trim ($ (this). Text ()) {flag = 1; Return flag?
True:false; //Set Hint-input-span-container width function sethintsearchcontainerwidth () {var hint_width = $hintSearchContainer. Width () + 2 * parseint ($hintSearchContainer. css (' Padding-left '). Match (/[0-9]+/) [0]) + 2 * parseint ($hintSearchContainer. css
(' Border-left '). Match (/[0-9]+/) [0]);
$hintBlock. css ({' Width ': hint_width}); }//Bind click event function Addullistener () {$hintUl. Delegate (' Li ', ' click '), function () {var text = $ (This). text (); if (!checkcontainerhas (text) {$hintSearch. Before (' <span class= ' tag label label-primary ' > ' + text + ' <i class= ')
FA fa-times "data-role=" Remove "></i><i> </i></span>");
Addspanlistenr ();
$hintSearch. Val ("");
Animateup (); )}///Listening span event function Addspanlistenr () {$ (". Hint-input-span-container span"). Delegate ("I", ' click ', Function () {$ (
This). Parent (). remove (); })
}
})

The focus is on the monitoring of events and the operation of DOM elements, depending on jquery.

The above is a small set to introduce the UI components of the input of multiple select Drop-down implementation method (with search function), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!