Question

I have multiple autocomplete textbox paired with multiple hidden fields. How do I do that? Ex. textbox1:name = hiddenfield1: Id, textbox2:name = hiddenfield2: Id.
I was already able to make 1-autocomplete and 1-hiddenfield work.

Here is the code for my script:

<script type="text/javascript">
    $(document).ready(function() {
        $('.auto').autocomplete({
            source: "search.php", 
            focus: function(event, ui) {
                $(idField).val(ui.item.value);
                $(this).val(ui.item.label);
                return false;
            },
            select: function(event, ui) {
                $(this).val(ui.item.label);
                $("#hidden").val(ui.item.value);
                return false;
            }
            //minLength: 3
        });
    });
</script>

<p>Type the name of a band: <input type="text" class="auto" /></p>
<p>Type the name of a band: <input type="text" class="auto" /></p>

<input name="hidden" id="hidden" type="hidden" />
<input name="hidden" id="hidden" type="hidden" />

Sir/Ma’am your answers would be of great help and very much appreciated.

Answer 1

Firstly, you’d need unique identifiers for all of your input fields, hidden or not. Then assigning values to them would be a lot easier. You’re really close, and I’d only change a few things to get it working, mostly to do with the IDs of the elements you’re using:

<script type="text/javascript">
    $(document).ready(function() {
        $('.auto').autocomplete({
            source: "search.php", 

            ...

            select: function(event, ui) {

                // figure out which auto we're using and get it's
                // associated hidden field...
                var element_id = $(this).attr('id');
                var hidden_element_id = element_id + "_hidden";

                // set the appropriate fields' values...
                $(this).val(ui.item.label);
                $("#"+hidden_element_id).val(ui.item.value);

                return false;
            }

            ...

        });
    });

</script>

<p>Type the name of a band: <input type="text" class="auto" id="auto1" /></p>
<p>Type the name of a band: <input type="text" class="auto" id="auto2" /></p>

<input name="hidden" id="auto1_hidden" type="hidden" />
<input name="hidden" id="auto2_hidden" type="hidden" />

One of the easier ways to associate hidden fields with visible counterparts…you get the ID of the element that’s currently being autofilled, then grab its hidden field counterpart by just appending ‘_hidden’ onto its ID attribute…make sense?

Don’t forget to change the ID attributes of the fields! Hope this helps!