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
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
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.
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.
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.
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
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.