FiveTech Software tech support forums

Thanks, I upvoted because this solved my problem within seconds of searching for a solution. You can use an element's ID in the appendTo option like so appendTo: "#your_element_id".

Code: Select all  Expand view

    <p>Modified Behavior<br>
    <input id="autocomplete2" type="text" placeholder="U.S. state name">
    <input id="autocomplete2-value" type="text" name="code"></p>
<script>
    /*
     * jQuery UI Autocomplete: Using Label-Value Pairs
     * https://salman-w.blogspot.com/2013/12/j ... mples.html
     */
    var data = [
        { value: "AL", label: "Alabama" },
        { value: "AK", label: "Alaska" },
        { value: "WI", label: "Wisconsin" },
        { value: "WY", label: "Wyoming" }
    ];
    $(function() {
        $("#autocomplete2").autocomplete({
            source: data,
            focus: function(event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();
                // manually update the textbox
                $(this).val(ui.item.label);
            },
            select: function(event, ui) {
                // prevent autocomplete from updating the textbox
                event.preventDefault();
                // manually update the textbox and hidden field
                $(this).val(ui.item.label);
                $("#autocomplete2-value").val(ui.item.value);
            },
            appendTo: "#editModal"

        })
       
    });
</script>