CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-ui-autocomplete
AnApprentice
AnApprentice

Reputation: 111020

jQuery Autocomplete, how to bind to two input fields?

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

Upvotes: 0

Views: 4340

Answers (3)

Adyadashu Engineering Solution
Adyadashu Engineering Solution

Reputation: 1

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,

Auto complete with Pre-set 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);
                }
            }
        }

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126072

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

Upvotes: 1

amchugh89
amchugh89

Reputation: 1296

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

Upvotes: 0

Related Questions