Search jQuery

jQuery Forum

jQquery UI Autocomplete

in Using jQuery UI • 3 months ago

Hi guys!

I've used jquery-ui-1.8.20's autocomplete and it used to work fine.
Then, I changed it to jquery-ui-1.9.1, and it failed.
I'm using not only autocomplete of jquery-ui-1.9.1, but other features too, like dialog, so I don't want to have 2 versions of jquery-ui in my project.

Here is my code:

$("#searchBox").ready(function () {
$('input[id$="txtPredictiveSearchBox"]').autocomplete({
minLength: 1,
delay: 200,
autoFocus: true,
highlight: true,
source: function (request, response) {
var typeOfSearch = $(this.element.context).parent().parent().find('input:checked').val()
== "GetStockSearchSuggestions" ? 0 : 1;
var data = { searchText: request.term, count: 5, contextKey: typeOfSearch };
$.ajax({
type: "POST",
url: "/srv/AutoSuggest.aspx/GetSuggestions",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(data),
delay: 200,
processdata: true,
success: function (data) {
response(data.d);
},
error: function (er) {
response("An error occur tryig load autocomplete data. See the console for mor info.");
console.log(er.responseText);
}
});
},
select: function (event, ui) {
window.location.assign(ui.item.href);
},
open: function (event, ui) {
$(this).autocomplete("widget")
.find("ui-menu-item-alternate")
.removeClass("ui-menu-item-alternate")
.end()
.find("li.ui-menu-item:odd a")
.addClass("ui-menu-item-alternate");
},
focus: function (event, ui) { },
close: function () { }
});
});

Where /srv/AutoSuggest.aspx/GetSuggestions is a WebMethod that returns an array of SearchItem:

public struct SearchItem
{
public string value;
public string text;
public string href;
}

On debug mode I can see expected result in success function's data.d prop, but

response(data.d);

generate nothing (doesn't show any data.).

This code used to work with jquery-ui-1.8.20. I haven't change anything in this code. I've changed only a version of jquery-ui.

Any ideas?

Thanks in advance!

Gev

Replies(2)

mike_laird

Re: jQquery UI Autocomplete

3 months ago

Here are a couple thoughts.
1. highlight is not an option or a method in the Autocomplete widget. Are you using the widget, or the plug-in? highlight is probably choking AC widget.
2. If you haven't, check your server's response to ensure it is properly formated JSON and that at least one of the elements is "value": - as in "value":"something". When you say debug mode doesn't show any data, it sounds like you may be having trouble seeing the response. If so, start Firebug or Chrome Developer Tool just before you enter data into the input box. When you enter data, the Console should show a response and if you click on the + buttons to open up details, you should be able to see the server response array. Copy it into jsonlint.com and test if it is valid format.

Hope that helps.

GGev

Re: jQquery UI Autocomplete

3 months ago

Thanks Mike!

1. I'm not sure what I was using widget or plugin, but I'm sure I've downloaded it from http://jqueryui.com/download/ page (Only AC and required parts were checked).

2. Actually, I have checked the server's response, and it is correct JSON data. In jquery-ui-1.8.20 you just had to call response(dataItemArray); where dataItemArray is an array of objects with the following properties: {value, text, href}. And values of these properties were automatically bound to AC popup's items. That's why my SearchItem struct has properties with these names.

Thanks again

Gev

Top Reply

Response title

Attachments

jQuery Forum

jQquery UI Autocomplete

Replies(2)

Re: jQquery UI Autocomplete

Re: jQquery UI Autocomplete

Statistics

Tags

Actions

Related Posts