Response title
This is preview!
Move this topic
jquery ui autocomplete - clears custom text with a mismatch after a previous match
in Using jQuery UI
•
9 years ago
I have an issue with the autocomplete where when I type in invalid text that does not match from the start like aaaaaa, it remains. but when I type in something that matches to begin with like brown, it matches and shows a bunch of names that begin with last name brown. my DB has values like Brown, Scott Brown, Peter
when I type Brown evrything shows up. when I dont type a space after Brown, and instead type Brown,S the text I type is cleared off. similarly when I type in Bro the list shows up. if I type Broa the list disappears and also the text Broa is cleard in the textbox.
How can I avoid this clearing of the text? Any help is greatly appreciated!
when I type Brown evrything shows up. when I dont type a space after Brown, and instead type Brown,S the text I type is cleared off. similarly when I type in Bro the list shows up. if I type Broa the list disappears and also the text Broa is cleard in the textbox.
How can I avoid this clearing of the text? Any help is greatly appreciated!
Thanks
1
Replies(9)
I'm seeing 2 issues.
The first is the behavior of Brown, S versus Brown,S
You can: 1. put both in the database (has clear usability issues), 2. put a function in your source: option to add a space in a "character comma character" substring (may have usability issues - how is Smith, Jr., John handled), or 3. do nothing and let your users figure out how to use the dropdown option list that you present.
The second issue is text being cleared from the input box. You didn't post any code, so its only speculation here, but I suspect a problem in your source: option. The code below does not clear the input box when strange inputs go in. Maybe it will help you. If not, come back with some code.
source: function (request, response){
$.ajax(
{
url: "yourServer.php",
type: "POST", // POST transmits (key=value&key1=value1) in utf-8
dataType: "json", //return data in json format
success: function (data)
{
response($.map( data, function (item)
{
return {
label: item.stateName,
value: item.name,
abbrev: item.stateAbbrev,
}
}));
}
});
},
The first is the behavior of Brown, S versus Brown,S
You can: 1. put both in the database (has clear usability issues), 2. put a function in your source: option to add a space in a "character comma character" substring (may have usability issues - how is Smith, Jr., John handled), or 3. do nothing and let your users figure out how to use the dropdown option list that you present.
The second issue is text being cleared from the input box. You didn't post any code, so its only speculation here, but I suspect a problem in your source: option. The code below does not clear the input box when strange inputs go in. Maybe it will help you. If not, come back with some code.
source: function (request, response){
$.ajax(
{
url: "yourServer.php",
type: "POST", // POST transmits (key=value&key1=value1) in utf-8
dataType: "json", //return data in json format
success: function (data)
{
response($.map( data, function (item)
{
return {
label: item.stateName,
value: item.name,
abbrev: item.stateAbbrev,
}
}));
}
});
},
Leave a comment on mike_laird's reply
Thanks. Here is my code:
$("#to").autocomplete({
source: function (req, add) {
var _toUrl = "MyWebService.asmx/AutoCompleteUsers";
$.ajax({
type:"POST",
url: _toUrl,
contentType: "application/json; charset=utf-8",
data: "{'term': '" + $('#to').val() + "'}",
dataType: "json",
success: function (response) {
var suggestions = [];
// process response
var dataArray = response.d;
for (var i = 0; i < dataArray.length; i++) {
suggestions.push(dataArray[i]);
}
add(suggestions);
},
error: onAutoCompleteFailure
});
},
close: function (event, ui) {
$(this).val("");
},
$.ajax({
type:"POST",
url: _toUrl,
contentType: "application/json; charset=utf-8",
data: "{'term': '" + $('#to').val() + "'}",
dataType: "json",
success: function (response) {
var suggestions = [];
// process response
var dataArray = response.d;
for (var i = 0; i < dataArray.length; i++) {
suggestions.push(dataArray[i]);
}
add(suggestions);
},
error: onAutoCompleteFailure
});
},
close: function (event, ui) {
$(this).val("");
},
//define select handler
change: function () {
//prevent 'to' field being updated and correct position
$("#to").val("").css("top", 2);
}
}).focus();
Leave a comment on spisipat's reply
OK, you're doing some things that are beyond me. I'm not a noobie, but I am still a novice, however I do a lot with Autocomplete and try to help others.
Your code looks fine, as best I can tell and I don't have a specific reason for your problem. But I strongly believe it is in the success: option - mostly because I can't see how it can be anywhere else. Here's my success: option. The label and value keys are created in the php. I do not have the problem of "invalid text" dropping out of the input box with this code. The string "xqcqlqx" sits in there fine, if that's what the user really wants. I deal with garbage later in validation.
success: function (data){
response( $.map(data.geonames, function (item){
return {
label: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : ""),
name: item.name //used to set a hidden input
}
}));
},
Hope it helps.
Your code looks fine, as best I can tell and I don't have a specific reason for your problem. But I strongly believe it is in the success: option - mostly because I can't see how it can be anywhere else. Here's my success: option. The label and value keys are created in the php. I do not have the problem of "invalid text" dropping out of the input box with this code. The string "xqcqlqx" sits in there fine, if that's what the user really wants. I deal with garbage later in validation.
success: function (data){
response( $.map(data.geonames, function (item){
return {
label: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name + (item.adminName2 ? ", " + item.adminName2 : "") + (item.adminName1 ? ", " + item.adminName1 : ""),
name: item.name //used to set a hidden input
}
}));
},
Hope it helps.
Leave a comment on mike_laird's reply
I am essentially going through the d object of the result which returns an array like Name1, Nam2, etc. I add each one to the suggestions array. and I call the jquery add object to add the matched names to the autocomplete field. So I dont know what's wrong with this still.
if I type in something random like aaaaaaaaaa it stays in there. but if I type in say Bro - it immediately shows the matched list. now when I type in a after that like Broa, it erases it completely from the textbox.
also on a different note, since you said you have done a lot with autocomplete, can you please look at my question on the other link
Leave a comment on spisipat's reply
Yes, as I read your code I figured it was doing what you describe. It is logical, but I can tell you from looking at over 100 Autocomplete code samples on this forum, it is also unusual - maybe unique. Any complex body of code, like Autocomplete, has certain expectations (aka quirks) about behavior. The rest of your code is fine, so I suspect that is the problem source. The only other possibility is the close: option. I don't think its a problem, but $this statements are sometimes quixotic, at least for me. Its an easy test to remove/change the close: statement. If the problem continues, it is in the success: option. I can't speak detailed code talk on this one - just general pattern recognition. So that's my best shot. I'd suggest creating a small test page to try a different success: option. You may need to change some php to match up with it.
I don't develop for mobile devices, yet, so I don't have anything specific about your mobile problem. At the JS/jQuery group I attend, we had a discussion recently about apps vs. web pages on mobile phones. The strong consensus was that apps have exploded in popularity because web pages have unpredictable behavior on mobile device operating systems. The lesson I took away is either develop in a native app environment(s) or run your web page through PhoneGap to convert it to an app. I think developing a web page to display on a mobile device, as is, is a dead end.
I don't develop for mobile devices, yet, so I don't have anything specific about your mobile problem. At the JS/jQuery group I attend, we had a discussion recently about apps vs. web pages on mobile phones. The strong consensus was that apps have exploded in popularity because web pages have unpredictable behavior on mobile device operating systems. The lesson I took away is either develop in a native app environment(s) or run your web page through PhoneGap to convert it to an app. I think developing a web page to display on a mobile device, as is, is a dead end.
Leave a comment on mike_laird's reply
I thought you develop apps using phone gap. can I actually use it to convert my existing web app to native blackberry app for example? I tried searching online but its not that intuitive. please provide pointers if you think this is possible.
Leave a comment on spisipat's reply
I go to a monthly local meet-up about javascript and jQuery. Guys who are much better than me have talked several times about using PhoneGap to convert a web site into Android and/or iPhone apps. Blackberry has not been mentioned, but the PhoneGap site must talk about that. It is a conversion tool, not a development environment. I have not used it, but friends have. Nothing is intuitive until you work with it for a few years - that's what I've found. So you can: 1. slog through it, 2. find someone in your area to do it for you, 3. I can put you in touch with someone who has used PhoneGap.
Leave a comment on mike_laird's reply
hmm.. for now I can probably live with this. I have another issue on a BB 5. when I type in a few chars quickly like pis for the first time, it immediately shows me all the suggestions. but as I add any other character or change the typing, it doesnt show me any suggestions anymore no matter what I do. sometimes it shows a black square with a clock like as if its making a call for a second and it disappers. this works fne on desktop and other mobile devices eveyr time I type I get suggestions. just on BB5 I have the issue. Any idea?
Leave a comment on spisipat's reply
Any resolution for autocomplete (plugin) functionality on BB devices?
Leave a comment on dyardy's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to spisipat's question
Statistics
- 9 Replies
- 12504 Views
- 1 Followers