My style, let’s first introduce the renderings. If you feel it’s pretty good, please refer to the implementation code.
Let's not talk nonsense and look at the div hierarchy first
<!-- The outermost div can be specified at any time to define the width of the child element --><div><!-- Form label Add text prompts --><label for="">Full text search</label><!-- Multiple choices to host div will dynamically add span in the future --><div><!-- Form elements are used to bind listening events and receive user inputs, span will be dynamically added above the layer --><input type="text" name="hint-search" value="" placeholder="Select keywords or press tab or enter to split keywords"></div><!-- Include drop-down list columns --><div><!-- Dynamically add li according to json data packets --><ul></ul></div>
The dom structure annotation can be explained clearly, let’s take a look at css
* {box-sizing: border-box;}.hint-input-span-container {width:100%;background-color: #ffff;border: 1px solid #ccc;box-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: 2px;margin-bottom: 2px;display: inline-block;}.label {font-size: 10px;padding: 4px 6px;border: none;text-shadow: none;border-radius: 3px;font-weight: 200;}.label-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='hint-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: #ffff;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;padding: 2px 4px;}.hint-ul li:hover{background-color: #eee;}It is important to set border-sizing:border-box in css. This property can make padding and border compute in width
.hint-input-span-container It is also important to set display to inline-block, there is a list of tags
.hint-block sets z-index to 9999 to ensure display at the front end, and position is absolute to ensure its position
All others can be adjusted according to your needs
Let's see the js code below
$(function(){//json data packet var data = {data:["123","Hello Beijing","Beijing Welcome","Beijing Good","Ocean","Ocean Guangli Bureau","I Ocean","I was surprised","I lalala","I can't bear it","Institution","Japan","Russia Mountain","Ethiopia","Ibaka","Bibi"]};//Get the dom object that needs to be called multiple times later var $hintSearch = $("input[name='hint-search']");var $hintSearchContainer = $(".hint-input-span-container");var $hintBlock = $(".hint-block");var $hintUl = $(".hint-ul");//Add dictionary addDictionary(data.data,addUlListener);//Set dictionary list width setHintSearchContainerWidth();//Implement responsive listening to resize event $(window).bind('resize', setHintSearchContainerWidth);//Get focus$hintSearch.focus(function(){animteDown();});//Lost focus//Set delay in order to listen to click response$hintSearch.blur(function(){setTimeout(function(){animateUp();},200);});//TAB and enter event//Speak the two keys of tab and enter If there is input content in the input, add span//Please note that the event should be prevented from bubbling and switching 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>'+ text +' <i data-role="remove"></i><i></i></i></span>');addSpanListenr();}//console.log($hintSearch.val());$hintSearch.val("");$hintSearch.focus();e.preventDefault();break;}default: ;}});//Detection input pairing//Match the input content in li If the string is included, it can be found and returned//The search method can be modified by itself. As long as you ensure that you return a searched array, $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 matching entry");}updateDictionary(tmparr,addUlListener);})//Function library//Add a common dictionary library for users function addDictionary(dataarr, callback) {for(var i = 0; i < dataarr.length; i++) {$hintUl.append('<li>'+ dataarr[i] +'</li>');}callback();}//Update search content function updateDictionary(dataarr,callback) {$hintUl.empty();addDictionary(dataarr,callback);}//Swipe down animation//Encapsulate 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)'});}//Swipe up animation function animateUp(){$hintBlock.slideUp('fast',function(){$hintSearchContainer.css({'border':'1px solid #ccc'});});});}//Check whether it is repeated with input function checkContainerHas(text){var flag = 0;$(".hint-input-span-container span").each(function(){if ($.trim(text) == $.trim($(this).text())) {flag = 1;return;}});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>'+ text +' <i data-role="remove"></i><i></i></i></span>');addSpanListenr();}$hintSearch.val("");animateUp();})}// Listen to span events function addSpanListenr() {$(".hint-input-span-container span").delegate("i",'click',function(){$(this).parent().remove();})}})The focus is on listening to events and operating dom elements, which depends on jquery.
The above is the input multiple-select pull-down implementation method of ui component introduced to you by the editor (with search function). I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!