jQuery ui combobox add multiple search queries

Question

I would like to have a drop-down with multiple search queries for one item.

I am using jQuery UI Combobox.

Example: In the drop-down you see 'USD' but if you type 'dollar' it will also show 'USD'

 <div class="ui-widget">
      <label>Currency: </label>
      <select id="comboboxCurrency">
         <option></option>
         <option value"dollar">USD</option>
         <option label"dollar">EUR</option>
         <option>AUD</option>
         <option>BRL</option>
         <option>CAD</option>

I have tried both 'value' and 'label' both are not working.

What am I missing here?

Answer 1

I'm assuming you are using jQuery widget factory to create custom ui for dropdown menu.

You can modify _source method of $.widget factory in such a way that it will search on the basis of option value instead of option text

_source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response(this.element.children("option").map(function() {
        // get text of the option
        var text = $(this).text();
        // get value of the option
        var value = $(this).val();
        // check is value is set and pass value to matcher.test() method
        if (this.value && (!request.term || matcher.test(value)))
          return {
            label: text,
            value: text,
            option: this
          };
      }));
    }

 $(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($.ui.autocomplete.escapeRegex(request.term), "i"); response(this.element.children("option").map(function() { var text = $(this).text(); var value = $(this).val(); if (this.value && (!request.term || matcher.test(value))) 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(); } }); $("#comboboxCurrency").combobox(); });

 .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; }

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="ui-widget"> <label>Currency: </label> <select id="comboboxCurrency"> <option></option> <option value = "dollar usd">USD</option> <option value = "euro eur">EUR</option> <option value = "aud">AUD</option> <option value = "brl">BRL</option> <option value = "cad">CAD</option>