Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I tried answer this in the way that I would do it in my own project.</p> <p>I read through the demo source code from the page you posted. In the jquery code that generates the autocomplete combobox, I added one line of code that processes when the combobox is created that reads the selected value from your "select" element. This way you can programmatically set the default value (like you would normally if you were not using the autocomplete combobox)</p> <p>Here is the one line I added:</p> <pre><code>input.val( $("#combobox option:selected").text()); </code></pre> <p>Plain and simple. It sets the value of input to the text value of the selected element from #combobox. Naturally, you will want to update the id elements to match your individual project or page.</p> <p>Here it is in context:</p> <pre><code>(function($) { $.widget("ui.combobox", { _create: function() { var self = this; var select = this.element.hide(); var input = $("&lt;input&gt;") .insertAfter(select) .autocomplete({ source: function(request, response) { var matcher = new RegExp(request.term, "i"); response(select.children("option").map(function() { var text = $(this).text(); if (this.value &amp;&amp; (!request.term || matcher.test(text))) return { id: this.value, label: text.replace(new RegExp("(?![^&amp;;]+;)(?!&lt;[^&lt;&gt;]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^&lt;&gt;]*&gt;)(?![^&amp;;]+;)", "gi"), "&lt;strong&gt;$1&lt;/strong&gt;"), value: text }; })); }, delay: 0, change: function(event, ui) { if (!ui.item) { // remove invalid value, as it didn't match anything $(this).val(""); return false; } select.val(ui.item.id); self._trigger("selected", event, { item: select.find("[value='" + ui.item.id + "']") }); }, minLength: 0 }) .addClass("ui-widget ui-widget-content ui-corner-left"); // This line added to set default value of the combobox input.val( $("#combobox option:selected").text()); $("&lt;button&gt;&amp;nbsp;&lt;/button&gt;") .attr("tabIndex", -1) .attr("title", "Show All Items") .insertAfter(input) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }).removeClass("ui-corner-all") .addClass("ui-corner-right ui-button-icon") .click(function() { // close if already visible if (input.autocomplete("widget").is(":visible")) { input.autocomplete("close"); return; } // pass empty string as value to search for, displaying all results input.autocomplete("search", ""); input.focus(); }); } }); })(jQuery); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload