jQuery Autocomplete using extraParams to pass additional GET variables

后端 未结 13 728
独厮守ぢ
独厮守ぢ 2021-01-31 17:23

I am referring specifically to the jQuery Autocomplete v1.1 plugin by Jörn Zaefferer [source: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/] as there seems to

相关标签:
13条回答
  • 2021-01-31 17:59

    You can use the built in jquery ui autocomplete like so:

              $(function() {
             $("#BurroughName").autocomplete({
                    minLength: 0,
                    source: function( request, response) {
                                $.ajax({
                                            url: "/JsonData/GetBurroughFromSearchTermJson",
                                            dataType: "json",
                                            data: {
                                                        term: request.term,
                                                        CityId: $("#CityId").val()
                                            },
                                            success: function( data ) {
                                                        response( data );
                                            }
                                });
                    },                  
                    select: function( event, ui) {
                        $("#BurroughId").val(ui.item.id);
    
                        if (ui.item.id != null) {
                             var cityId = $('#CityId').val();
                            $.getJSON("/AdSales/City.mvc/GetCityJSONListFromBrand", { burroughId: ui.item.id }, function(data) {
                                 $("#CityId").fillSelect(data);
                                 var foo = $("#CityId option[value=" + cityId + "]");
                                 if(($("#CityId option[value=" + cityId + "]").length > 0) && cityId != "")
                                 {
                                     $("#CityId").val(cityId);
                                 }
                            });
                        }
                        $('#burroughSpinner').fadeOut('slow', function(){});
                    }
             });
         });
    

    Here's their jsonp example: http://jqueryui.com/demos/autocomplete/#remote-jsonp

    0 讨论(0)
  • 2021-01-31 18:02

    I had the same problem, but oddly enough, only with the minified version of the autocomplete plugin. When I used the non-minified version, it works. I haven't looked at the minified version yet to see what the difference might be.

    0 讨论(0)
  • 2021-01-31 18:03

    While less than ideal, I've hacked/modified the plugin to get it to work for me.

    Simply, I've altered the AJAX jQuery function within the plugin.

    Around line 363 you'll see:

            $.ajax({
                // try to leverage ajaxQueue plugin to abort previous requests
                mode: "abort",
                // limit abortion to this input
                port: "autocomplete" + input.name,
                dataType: options.dataType,
                url: options.url,
                data: $.extend({
                    q: lastWord(term),
                    search_type: $(input).attr('name'), // my mod to pickup multiple fields
                    limit: options.max
                }, extraParams),
                success: function(data) {
                    var parsed = options.parse && options.parse(data) || parse(data);
                    cache.add(term, parsed);
                    success(term, parsed);
                }
            });
    

    I'm still looking for an elegant solution to this so feel free to keep suggestions coming.

    0 讨论(0)
  • 2021-01-31 18:03

    Using the autocomplete in JQuery 1.7.something...

    Using an aspx data grid: I needed autocomplete to fire for any record choosen but with different seed data based on the value entered. I also needed two other fields that are being displayed in the record on the data grid to get my data for the autocomplete. The fields I need to reference all have their own class name.

        $(".AutoSearch").autocomplete({
                DateTime: "",
                Maker: "",
                search: function (event, ui) {
                    DateTime = $(this).parent().parent().parent().find(".DateTime").text();
                    Maker = $(this).parent().parent().parent().find(".Maker").text();
                },
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "AutoList.aspx/GetListOfAutos",
                        data: "{ " +
                            "'DateTime': '" + DateTime + "', " +
                            "'Maker': '" + Maker + "', " +
                            "'SearchSeed': '" + request.term + "', " +
                            "'NumberToRetrieve': '" + 100 + "'" +
                        " }",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.Description,
                                    value: item.Number
                                }
                            }));
                        },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("There was an error retrieving the Data.");
                        }
                    });
                },
                change: function (event, ui) {
                    $(this).parent().parent().parent().parent().parent().parent().css("background-color", "#EEC900");
                    $(this).parent().parent().parent().parent().parent().parent().find(".chkReadyExport").find("input:checkbox").prop("checked", false);
                },
                select: function (event, ui) {
                    this.value = ui.item.value;
                    return false;
                },
                minlength: 6,
                open: function () {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function () {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });
        }
    

    I added two properties; DateTime and Maker and then using search: which is fired before the autocomplete fires source: I was able to get the data I needed from the row that I was on. This provided me a nice way to keep all my searching and extra data items all in one place.

    The .parent().parent() and so on is because I have multi-line tables to display my data in the gridview and I need to traverse up the tree and then find the text box or label I'm looking for and change the background color of the row with the changed data. I am not proficient at finding items with jQuery yet thus the parent.parent... thing.

    0 讨论(0)
  • 2021-01-31 18:04
    jQuery( "#jac" ).autocomplete({
        source: autocompleteURL,
        minLength: 2,
        search: function( event, ui ) { 
    
            // update source url by adding new GET params
            $(this).autocomplete( 'option', 'source', autocompleteURL + 'var1=aaa&var2=bbb' );
        }
    })
    

    Works for me with jquery.ui.autocomplete 1.8.17

    0 讨论(0)
  • 2021-01-31 18:05

    I am not sure why it is not working.

    But you can first check/debug for value of $(this).attr('name').

    Also one more thing as here explained [in options tab], you can check with Firebug to see ajax post request(for url and it's data) which will help you to resolve the problem.

    0 讨论(0)
提交回复
热议问题