简体   繁体   English

Jquery自动完成,在组合框上有多个选项

[英]Jquery Autocomplete with multiple selections on combobox

I have some existing jquery autocomplete code which has all of the functionality that I need. 我有一些现有的jquery自动完成代码,它具有我需要的所有功能。 The autocomplete searches combobox for matches that start with first character. 自动完成功能会在组合框中搜索以第一个字符开头的匹配项。 All I need to do is add multiple selection functionality as such: 我需要做的就是添加多个选择功能:

jqueryui.com/autocomplete/#multiple jqueryui.com/autocomplete/#multiple

Here is my code: 这是我的代码:

 <html> <head> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <meta name="HandheldFriendly" content="True"> <meta name="PalmComputingPlatform" content="True"> <meta http-equiv=Content-Type content="text/html; charset=windows-1252"> <title>WebFOCUS Report</title> </head> <body> <br /> <br /> <br /> <div> Please choose an option : <select size="3" id="decision2"> <option selected>1521</option> <option>3336</option> <option>5454</option> <option>7890</option> <option>2178</option> </select> </div> <style> .custom-combobox { position: relative; display: inline-block; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; } .custom-combobox-input { margin: 0; padding: 5px 10px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $.widget( "custom.combobox", { _create: function() { this.wrapper = $( "<span>" ) .addClass( "custom-combobox" ) .insertAfter( this.element ); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children( ":selected" ), value = selected.val() ? selected.text() : ""; this.input = $( "<input>" ) .appendTo( this.wrapper ) .val( value ) .attr( "title", "" ) .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" ) .autocomplete({ delay: 0, minLength: 0, source: $.proxy( this, "_source" ) }) .tooltip({ classes: { "ui-tooltip": "ui-state-highlight" } }); this._on( this.input, { autocompleteselect: function( event, ui ) { ui.item.option.selected = true; this._trigger( "select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $( "<a>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .tooltip() .appendTo( this.wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "custom-combobox-toggle ui-corner-right" ) .on( "mousedown", function() { wasOpen = input.autocomplete( "widget" ).is( ":visible" ); }) .on( "click", function() { input.trigger( "focus" ); // Close if already visible if ( wasOpen ) { return; } // Pass empty string as value to search for, displaying all results input.autocomplete( "search", "" ); }); }, _source: function( request, response ) { var matcher = new RegExp("\\\\b" + $.ui.autocomplete.escapeRegex(request.term), "i" ); response( this.element.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text, value: text, option: this }; }) ); }, _removeIfInvalid: function( event, ui ) { // Selected an item, nothing to do if ( ui.item ) { return; } // Search for a match (case-insensitive) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // Found a match, nothing to do if ( valid ) { return; } // Remove invalid value this.input .val( "" ) .attr( "title", value + " didn't match any item" ) .tooltip( "open" ); this.element.val( "" ); this._delay(function() { this.input.tooltip( "close" ).attr( "title", "" ); }, 2500 ); this.input.autocomplete( "instance" ).term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); $( "#decision2" ).combobox(); $( "#decision2" ).on( "click", function() { $( "#decision2" ).toggle(); }); } ); </script> </body> </html> 

试试https://jqueryui.com/resources/demos/autocomplete/multiple.html链接,它可以提供正确的解决方案。

I've modified your code. 我修改了你的代码。 Please check and let me know if that's what you wanted. 请检查并告诉我这是否是您想要的。

 <html> <head> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <meta name="HandheldFriendly" content="True"> <meta name="PalmComputingPlatform" content="True"> <meta http-equiv=Content-Type content="text/html; charset=windows-1252"> <title>WebFOCUS Report</title> </head> <body> <br /> <br /> <br /> <div> Please choose an option : <select size="3" id="decision2"> <option selected>1521</option> <option>3336</option> <option>5454</option> <option>7890</option> <option>2178</option> </select> </div> <style> .custom-combobox { position: relative; display: inline-block; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; } .custom-combobox-input { margin: 0; padding: 5px 10px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $.widget("custom.combobox", { _create: function() { this.wrapper = $("<span>") .addClass("custom-combobox") .insertAfter(this.element); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var sourceArray = []; var selectItems = this.element.context.children; $.each(selectItems, function(i, item) { sourceArray.push(item.value); }); var selected = this.element.children(":selected"), value = selected.val() ? selected.text() : ""; function split(val) { return val.split(/,\\s*/); } function extractLast(term) { return split(term).pop(); } this.input = $("<input>") .appendTo(this.wrapper) .val(value) .attr("title", "") .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") .autocomplete({ delay: 0, minLength: 0, source: function(request, response) { // delegate back to autocomplete, but extract the last term var term = extractLast(request.term), matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i"); response($.grep(sourceArray, function(item) { return matcher.test(item); })); }, select: function(event, ui) { var terms = split(this.value); // remove the current input terms.pop(); // add the selected item terms.push(ui.item.value); // add placeholder to get the comma-and-space at the end terms.push(""); this.value = terms.join(", "); return false; } }) .tooltip({ classes: { "ui-tooltip": "ui-state-highlight" } }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $("<a>") .attr("tabIndex", -1) .attr("title", "Show All Items") .tooltip() .appendTo(this.wrapper) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass("ui-corner-all") .addClass("custom-combobox-toggle ui-corner-right") .on("mousedown", function() { wasOpen = input.autocomplete("widget").is(":visible"); }) .on("click", function() { input.trigger("focus"); // Close if already visible if (wasOpen) { return; } // Pass empty string as value to search for, displaying all results input.autocomplete("search", ""); }); }, _removeIfInvalid: function(event, ui) { // Selected an item, nothing to do if (ui.item) { return; } // Search for a match (case-insensitive) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children("option").each(function() { if ($(this).text().toLowerCase() === valueLowerCase) { this.selected = valid = true; return false; } }); // Found a match, nothing to do if (valid) { return; } // Remove invalid value this.input .val("") .attr("title", value + " didn't match any item") .tooltip("open"); this.element.val(""); this._delay(function() { this.input.tooltip("close").attr("title", ""); }, 2500); this.input.autocomplete("instance").term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); $("#decision2").combobox(); $("#decision2").on("click", function() { $("#decision2").toggle(); }); }); </script> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM