JSFiddle - React, Tailwind, and code Playground

by wtvamp

HTML

<script src="http://www.vampsworld.com/jquery-ui-combobox.js"></script>
<select id="savedSearchSelect">
    <option value="10024">All docs.true</option>
    <option value="10028">fgfd.false</option>
    <option value="10029">htyu.false</option>
    <option value="10030">dffdgb.false</option>
    <option value="10031">Puppy.false</option>
    <option value="10056">Puppy 2.false</option>
    <option value="10057">Puppy 3.false</option>
    <option value="10058">Puppy 4.false</option>
    <option value="10059">Puppy 5.false</option>
    <option value="10060">Puppy 6.false</option>
</select>

JavaScript

$(document).ready(function() {

    // 1) INitialize the combobox
    $("#savedSearchSelect").combobox({
        selected: function(event, ui) {
            alert("selected!");
        }
    });

    // 2) Show the underlying select for testing
    $("#savedSearchSelect").show();

    // 3) select a different option in the underlying select
    $("#savedSearchSelect option:eq(2)").attr("selected", "selected");
    $("#savedSearchSelect").change(function() {
        $(this).next().val($(this).children(':selected').text());
    });

    // 4) How to trigger change now that option has been manually selected in underlying select?


});