jQuery Autocomplete, how to bind to two input fields?

Question

I would like to bind the the same autocomplete to two input fields.

The fields:

<input id="rwF1" maxlength="250" type="text" value="">
<input id="rwF2" maxlength="250" type="text" value="">

Then my autocompleter in jQuery:

    $("#rwF1, #rwF2").autocomplete({
        source: availableTags
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $('<li class="roomWizardLI"></li>')
        .data( "item.autocomplete", item )
        .append( "<a><span class='title'>" + item.value + "</span><span class='Count'>" + "2" + " members</span></a>")
        .appendTo( ul );
    };

While this binds and the autocomplete menu appears on both inputs. The custom renderItem only applies to the first input field. The second is completely ignored. Any ideas why and how to make the autocomplete work fully for both input fields?

Thanks

prem911 · Accepted Answer · 2017-04-21 18:34:32Z

1

The problem is that .data retrieves data for the first element in the matched elements (according to the documentation).

You'll need to iterate over each item that the autocomplete widget was applied to and apply your custom rendering code:

$("#rwF1, #rwF2").autocomplete({
    source: availableTags
}).each(function () {
    $(this).data( "uiAutocomplete" )._renderItem = function( ul, item ) {
        return $('<li class="roomWizardLI"></li>')
            .data( "item.autocomplete", item )
            .append( "<a><span class='title'>" + item.value + "</span><span class='Count'>" + "2" + " members</span></a>")
            .appendTo( ul );
    };
});

Example: http://jsfiddle.net/kcSfw/

Edited : Using Jquery 1.12.0, you need to use uiAutocomplete

edited Apr 21, 2017 at 18:34

prem911

2863 silver badges16 bronze badges

answered Apr 20, 2012 at 18:55

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AnApprentice Over a year ago

That is fantastic! THank you so much. I don't think I would have figured that out easily.

amchugh89 · Accepted Answer · 2016-08-14 09:18:55Z

0

You can bind autocomplete to an input each time you click onto it:

 $(document).on("focus",".class_of_autocomplete_inputs",function(e) {
    if ( !$(this).data("autocomplete") ) {
$( ".class_of_autocomplete_inputs" ).autocomplete({

....

So instead of trying to bind to a bunch of ids when you load the page - just give them a class and dynamically bind to the one you are 'focused' on

answered Aug 14, 2016 at 9:18

amchugh89

1,3162 gold badges15 silver badges35 bronze badges

Comments

Suraj Rao · Accepted Answer · 2022-05-22 14:55:40Z

Example is different but it works.
Here the situation is, I have to make autocomplete to work with the preset options as shown in the image. I have to input both options and entry I type-in.

Autocomplete with Preselect option,

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
    $(document).ready(function () {

        $('#SearchBasedFunction').autocomplete({
            source: ["1", "2"],
            minLength: 0
        }).focus(function () {
            var FunctionType = $('#SearchOption').val();
            $(this).autocomplete({
                source: function (request, response) {
                    $.ajax({

                        url: '/SalesModule/Sales/SearchNameAutoCompleteData',
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: request.term, FunctionType },
                        success: function (data) {


                            //console.log('track ....');
                            //console.log(data);

                            response($.map(data, function (item) {
                                // response(data.d);
                                return { label: item, value: item };
                            }))
                            $('#ActionSet2').val("BOMItems");
                        }
                    })
                },
                messages: {
                    noResults: "", result: ""
                }
            });
        });

    });

</script>

Below is the code for the SearchNameAutoCompleteData (to be written in controller)

 public JsonResult SearchNameAutoCompleteData(string Prefix, string FunctionType)
        {
            List<string> result = new List<string>();
            string constr = ConfigurationManager.ConnectionStrings["DhanyaContext"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))

            {
                using (SqlCommand cmd = new SqlCommand("select DISTINCT SystemFunction from tbl_SystemFunctions where SystemFunction LIKE '%'+@Prefix+'%'", con))
                {
                    con.Open();

                    cmd.Parameters.AddWithValue("@Prefix", Prefix);
                    SqlDataReader dr = cmd.ExecuteReader();
                    while (dr.Read())
                    {
                        result.Add(dr["SystemFunction"].ToString());
                    }
                    return Json(result, JsonRequestBehavior.AllowGet);
                }
            }
        }

Collectives™ on Stack Overflow

jQuery Autocomplete, how to bind to two input fields?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related