<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete - Combobox</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css"> <style> body { font-family: Arial, Helvetica, sans-serif; } table { font-size: 1em; } .ui-draggable, .ui-droppable { background-position: top; } .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-3.7.1.js"></script> <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script> <script> $(document).ready(() => { $.widget( "custom.combobox", { options: { data: [] }, _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: this._source.bind( this ) }) .tooltip({ classes: { "ui-tooltip": "ui-state-highlight" } }); this._on( this.input, { autocompleteselect: function( event, ui ) { if (this.element.is("select")) { if (ui.item.option) { ui.item.option.selected = true; } } else if (this.element.is("input")) { this.element.val(ui.item.value || ui.item.label); } this._trigger( "select", event, { item: ui.item.option }); }, }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $( "<a>" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .tooltip() .appendTo( this.wrapper ) .button({ icon: "ui-icon-triangle-1-s", showLabel: 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", "" ); }); }, _stripAccents: function (s) { if (!s) return ""; return s .normalize("NFD") .replace(/[u0300-u036f]/g, "") .replace(/đ/g, "d") .replace(/Đ/g, "D"); }, _source: function (request, response) { var term = this._stripAccents(request.term).toLowerCase(); var data = this.options.data || []; var results = $.map(data, (item) => { var label = item.label || item.toString(); var value = item.value || label; var norm = this._stripAccents(label).toLowerCase(); if (!term || norm.indexOf(term) !== -1) { return { label: label, value: value, data: item }; } }); response(results); }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); $("#country").combobox({ data: [ { label: "Hà Nội", value: "Hà Nội" }, { label: "TP Hồ Chí Minh", value: "TP Hồ Chí Minh" }, { label: "Đà Nẵng", value: "Đà Nẵng" } ] }); $("#province").combobox({ data: [ { label: "Long Biên", value: "Long Biên" }, { label: "Nghi tàm", value: "Nghi tàm" }, ] }); } ); </script> </head> <body> <input type="text" name="country" id="country"> <input type="text" name="province" id="province"> </body> </html>
