andyMatthews.net

This is just what I needed. Thanks so much - and Ray too of course.

Terry Collinson - March 28, 2012 03:22 am

awesome dood

SimoesAndNukes - March 28, 2012 07:49 am

Great work Andy, thanks!

Michael - April 03, 2012 03:45 am

Hello Andy,

this is real awesome work. It is working really good, but my problem is that I cannot send the content from the tag by POST request to my .php file. It tries always a GET request and I cannot see what is wrong in the code.

Mike - April 11, 2012 08:18 am

Hello Andy, good work.
Is there a way to set the textbox with the selected value?
Or use the selected value as an argument for a JavaScript function?

Adri - April 18, 2012 01:55 am

hello,
how it will send the data to the php file?

please I want to know as soon as possible.

Mahdi - April 18, 2012 01:47 pm

Mahdi

In the config block for autocomplete you'd the following:

link: 'yourpage.php?term='

Then in your PHP page you'd reference the 'term' URL variable.

I don't use PHP but I believe that it is

$_GET['term']

Andy matthews - April 18, 2012 03:26 pm

Great job man!!

the type of reply should be configurable, at least to choose 'json' and 'jsonp', when the url is not in the same domain.

Thanks.

joan - April 20, 2012 10:21 am

hello, I'm still new to jQuery mobile but how is this different from data-filter="true"

Sze - April 20, 2012 12:09 pm

@Mahdi: it is how Andy said. use link: 'yourpage.php?term=' and in your PHP file $_GET['term'].

@Andy: thanks for your replay. I saw that jQuery MObile uses the GET method by default. But it is possible to override this setting to use POST methods. SO it should be possible to send the data by POST request.

And again, thanks for your work. You did a great job!!!

Best regards,
Mike

Mike - April 21, 2012 01:54 am

thank you guys,

the problem now is not updating the suggestions

for example I have searched for the word "pan"

and it suggested "panda" and "panadol"

but when I clear the search box then put any string even not starting with "pan" it is giving me the same result.

the second thing I didn't understand the parameters of the function

source: 'search.php?method=search&returnformat=json&data=simple',

link: 'search.php?term=',


and the last thing if I want to send the keyword from jqm to php file in double qoutes what I would do?
like this term="keyword"

thanks in advance

Mahdi - April 23, 2012 02:00 pm

Awesome!! Great Job!!!!

LinuxonRails - April 24, 2012 11:38 am

If I request the search.php like this

http://localhost/saydoold/search.php?term=panadol

it would return:
["Panadol","Panda"]

but if I requested it like this:
http://localhost/saydoold/search.php?term="panadol"

It would only return this:
["Panadol"]

mahdi - April 24, 2012 01:39 pm

so it's not updating the results because $_GET['term'] = null

mahdi - April 24, 2012 02:11 pm

can you delete the last two comments, no need for them even all of my comments

looooong stupid story :DDDDDDDD

mahdi - April 24, 2012 02:44 pm

Hello and thanks for such a wonderful tool. However, I can't get it to fire in IE 8. Is this functionality not supported in IE?

$(document).bind('pageinit', function () {
$("#searchField").autocomplete({
target: $('#suggestions'),
source: 'fetchBooking.asmx/LoadBookings',
link: 'display.aspx?term=',
minLength: 1,
});

});

R Holguin - April 25, 2012 07:35 am

Hi Andy many thanks for this! I am actively searching fur such an update.

I am also looking for data grids that are designed for mobile devices, for order entry similar to flexigrid but for mobile any tips or advice? Thanks!?

Dan - May 02, 2012 08:27 am

Ive been looking for a JQM autocomplete for some time so this is very exciting to see. Ive got itiusing my json source fine and starts displaying based on the minlength i have set but doesnt seem to be filtering based on what i am typing. Any idea?

Pat - May 07, 2012 03:55 pm

My search box is part of a form and the search suggestions should ideally not display the rest of the form but rather appear as an overlay.

Would this be feasible and if so how would I approach it?

kannankeril - May 07, 2012 04:19 pm

Hi Andy, this looks like a great plugin and seems to be exactly what I've been looking for, but I think I'm doing something wrong.
I have a JSON file with objects similar to your complex remote example, except it has nested objects too. My code looks like this:

$("#searchpage").on("pageshow", function(e) {
$("#searchField").autocomplete({
target: $('#my-new-list'),
source: 'http://127.0.0.1/TEST/April%20mockup/scratch/test2.json',
link: 'app1.html?term=',
minLength: 1
});
});

IS there anything wrong with that?

Squishy - May 08, 2012 05:01 am

Hi Andy,

Is possible to make a link to another page for each value that i retrieve from the data?

mbarcala

Maykel Barcala - May 08, 2012 06:34 am

Hi Andy thank you for this!!
In jqueryui's autocomplete I can access to a JSON object this way
"...
source: "../common/searchClientesAjax.php",
select: function(event, ui) {
$('#idCliente').val(ui.item.id); $('#txtIdCliente').html("Código: "+ui.item.id);
..."

is there any way of returning directly a JSON object with your plugin?

Thanks again!

Sergio - May 10, 2012 10:40 pm

Thanks! Good work. It took about twelve hours to realize that the problem wasn't with your code, it was that somehow, my app dislikes jquery, when hosted remotely. Even when I copied it locally, it complained

jQuery is not defined at file:///android_asset/TEST.html:19
$ is not defined at file:///android_asset/TEST.html:187

I got around this by copy-pasting the jquery.mobile.min.js code, etc, into my page. Not recommended, but hey, it works! Good enough for right now.

TG - May 13, 2012 07:35 am

Nice job on the plugin! I'm trying to have the autocomplete allow multiple values seperated by a comma - just like the jquery UI - http://jqueryui.com/demos/autocomplete/#multiple.

Any ideas would be great! Thanks

Daniel - May 13, 2012 11:23 pm

The values need to be separate but I'd like to be able to select multiple values.

The demo on jQuery UI autocomplete -
http://jqueryui.com/demos/autocomplete/#multiple is exactly what I'm looking to achieve. I've tried adapting the code but can't get it to work....

Daniel - May 14, 2012 06:39 pm

How can I access the state list, as per your example? That is, where can i find a web service that will provide me with a json object so that I can put it in the source parameter. TY

Tri - May 18, 2012 04:55 am

Hi Andy,

Is there an option to change the propriety being displayed from "label":"Alabama" to another like "name":"John"

Dan - May 18, 2012 07:39 am

Hi Andy,

I am currently solving the issue, by parsing the json object and adding a label:

var jsData = [];

$("#necliente").bind("pageshow", function(e) {

$.ajax({
...
success: function(res) {
for (i = 0; i < res.length; i++){
jsData.push({label:res[i].name, value:res[i]});
}
},
});

$("#textinput2").autocomplete({
target: $('#suggestions'),
source: jsData,
minLength: 1
});

});

but this seems like unnecessary work. I have added an issue with the suggestion that you can re-target the label element to another element.

I then need to use a weird syntax to access the object array so I can fill in the form with the rest of the information. In this case it's a customer form, with auto-complete in the client name. I then need to use the callback to fill in the rest of the form. I think a lot of people will probably use this, so a short tut on how to do it would be very welcomed.

Also, how do I store the value of the selected
element? so I can use it in a array? In the callback example we have $("#searchField").autocomplete({
target: $('#suggestions'),
source: availableTags,
callback: function(e) {
var $a = $(e.currentTarget);
$('#searchField').val($a.text());
$("#searchField").autocomplete('clear');
},
link: 'target.html?term=',
minLength: 1
});

$a.text() return our selected label. How do I get the value? that is for instance if I select Maryland on the complex example

value: "23",
label: "Maryland"

console.log($a.text()); will return Maryland,
but console.log($a.val()); will not return 23.

How do I get the 23 value? (or a more complex object, in my case it would return the whole object, that I can then parse).

Currently I have to do a for loop to match the value, witch is a bit ugly.

Thanks!

Dan - May 21, 2012 11:18 am

Hi, thanks for sharing this, help me a lot. One question: is possible to use instead of ? Thanks.

Eder - May 22, 2012 09:18 am

@Dan,
This occured with me too. Need to show the label property to user and pick the value property to put on the search field.
It's not the best way, but I be able to solve doing this:
Changing the default value of the property link on the plugin to '' (empty),
Getting the value:
callback: function(e) {
var $a = $(e.currentTarget);
var valueOf = $a.attr('href');
}
Like I say, I know this is not the best way. I try to use the .data(), but fail.
Any ideas will be welcome

PS: Sorry for my terrible english!

Eder - May 22, 2012 01:52 pm

Eder not sure we are talking about the same thing.

What I want to do is something similar to http://jqueryui.com/demos/autocomplete/#custom-data that is similar to how a regular databinded chackbox works.

dan - May 26, 2012 12:57 pm

Any updates on this?

All I am asking here is how to get the 23 value from your complex example. How do i get the value from the selected element?

Tri - May 28, 2012 08:22 am

Yes but what is the function to get that value? That is where I am having problems. I have used chrome to debug the code and the event does not appear to have that value attached in any of it's propriety nodes.

using the callback I can get the text as per your example, but not the value, $a.value(), $a.data() does not return 23...

callback: function(e) {
var $a = $(e.currentTarget);
$('#searchField').val($a.text());
$("#searchField").autocomplete('clear');

TIA!

Tri - May 29, 2012 02:24 am

Hi Andy,

nice work.

Is there a way to forward an other addinitional input field value to 'source:'?

Thanks
Fabian

Fabian - May 30, 2012 07:54 am

Andy,

callback is not an option as I have to transmit the add. parameter with the source-url.

Fabian

Fabian - May 31, 2012 07:12 am

Hi. Nice plugin. I'm having trouble with it on Mobile Safari. The list is created (pulling links from a server), but nothing happens when I click on them.

It seems that the "term" parameter in the links get converted to a "#" before the link is activated. But difficult to trouble shoot on Mobile Safari, obviously. I get the same problem on iPad and iPhone - but it's all fine on IE/FF/Chrome/Safari. Any ideas?

Debbie - June 15, 2012 04:17 pm

It looks like when the list items are first generated the links are OK. Then, when I touch them, the link info disappears, so that all link to "#".

Why I don't know.

Debbie - June 15, 2012 05:01 pm

I had a problem with this autocompleter to make it work in iPhone/iPad. I was getting # value back. After some thinking I have changed this part of code by storing the value in ID as opposed to HREF:

if ($.isPlainObject(value)) {
	str.push('<li><a id="' + settings.link + encodeURIComponent(value.value) + '" data-transition="' + settings.transition + '" href="' + settings.link + encodeURIComponent(value.value) + '" data-transition="' + settings.transition + '">' + value.label.replace(new RegExp("("+$this.val()+")",'gi'),"<span class='highlight'>$1</span>") + '</a></li>');
} else {
	str.push('<li><a id="' + settings.link + encodeURIComponent(value) + '" data-transition="' + settings.transition + '" href="' + settings.link + encodeURIComponent(value) + '" data-transition="' + settings.transition + '">' + value.replace(new RegExp("("+$this.val()+")",'gi'),"<span class='highlight'>$1</span>") + '</a></li>');
}

Then in your JS change this part of code as well to retrieve the value from ID instead of HREF:

if ($('#'+searchid+'_visual_'+a.attr('id')).size() == 0) {
	hiddenInput = $('<input/>',{id:searchid+'_hidden_'+a.attr('id'),type:'hidden',name:searchid+'[]',value:a.attr('id')});
	hiddenInput.appendTo($('#'+searchid+'_inputs'));
	$vis = $('<span id="'+searchid+'_visual_'+a.attr('id')+'" class="contributor">'+a.text()+'</span>')
}

Hope that helps!

Peter Dolinaj - June 20, 2012 02:44 am

Andy, 1.4 is great but you left version 1.3 in the actual file. You changed the file name but inside both the full and compressed version in the header it says Version 1.3

David - June 21, 2012 09:35 pm

Olá, parabéns pelo excelente trabalho. Eu gostaria de apenas colocar o valor seleciona do target, como posso fazer?
molabss

Moises - June 25, 2012 04:24 pm

Andy,I would like to be able to retrieve any possible string that contains my input. for example, if I put "York" in the text input, the list would retrieve "New York".

Thanks for sharing your great work!

Felipe Viana - July 01, 2012 12:29 am

Hi Andy, I was able to do it by changing the RegEx line for this:
var element_text, re = new RegExp('.*\.' + text, 'i');
Thanks man, keep up the good work.

Felipe Viana - July 01, 2012 12:46 am

Hi Andy, got my first issue resolved. However, I'm a bit stuck; I need to be able to search the entire contents of each object (using the Local Comples Data method). My objects look like this:

{
value: "someValue", label: "someLabel", address: "someAddress"
}

The search results only return matches against the label property, but I need it to return results from value, label and address.

How do I modify the plugin to accomplish this?

(Again, thanks for the awesome plugin!)

Squishy - July 06, 2012 07:48 am

Figured it out! For anyone who's curious:

I modified an if statement in the handleInput function from:

if ($.isPlainObject(element)) {
element_text = element.label;
} else {
element_text = element;
}

to

if ($.isPlainObject(element)) {
element_text = element.label + element.address + element.value;
} else {
element_text = element;
}

Squishy - July 06, 2012 08:23 am

I think that would be a rather useful addition to the plugin, actually. In my case, the element.value and element.address fields are shown to the user, but would work equally as well as "hidden fields". For example, if you had a list of stock exchange entities, you could use an element property to contain the shortened name (MSFT for Microsoft, GOOG for Google) etc etc. That way a user would be able to search for "MSFT" and have the "Microsoft" result returned.

Squishy - July 06, 2012 08:27 am

Hi Andy,,


$("#searchField").autocomplete({
target: $('#suggestions'),
source: autocompleteData,
link: 'target.html?term=',
minLength: 1,
callback: function(e) {
// below statement output "#" only when deploy to device aka iPhone
$(e.currentTarget).attr("href");
});
});

Mark Thien - July 08, 2012 09:14 am

Works great except the list of links that gets created default to being loaded via ajax. Is there any way to get the links to have data-ajax=false or rel=external so they can go to my product detail pages and load correctly?

Some loser - July 09, 2012 11:32 pm

I needed the list to render anchor tags with data-ajax=false so when the item is selected from the results it would go to a detail page with a full load of the page.

I came up with this callback. Seems to do what I need but does anybody see a better way to do it?

callback: function(e) {
$('#suggestions a').attr('data-ajax', 'false');
var $a = $(e.currentTarget); // access the selected item
window.location = $a.attr("href");
}

Robert Marley - July 10, 2012 12:13 am

I need to know how to pass json from jsp page to html page.


let the jsp page consists of complex data

String str=parseJson('[
{"label":"value,"key":"value},{"label":"value,"key":"value}...]');

how to convert this one and pass it to ajax autocomplete function in the complex page which you have provided.No need of DB value retrieval.let it be a hard coded one in jsp page.
I am running it on tomcat server.

please provide me full code from jsp and also your complex page code

rajesh - July 11, 2012 12:18 pm

Andy:

Hi, thanks for all your projects and help you have provided to the community. I am trying to use the autocomplete plugin with asp.net and running into some issues.

Here is my script but it does not fire - I can get it going with a 'click' event but not with 'pageshow' - not sure what is going on here.


$("#mainPage").bind("pageshow", function (e) {
$("#searchField").autocomplete({
target: $('#suggestions'),
source: $.parseJSON(function (request, response) {
$.ajax({
type: "POST",
url: "Default.aspx/fGetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
return response.d;
},
failure: function (response) {
alert("Issues Here");
}
});
}),
link: 'target.html?term=',
minLength: 1
});
});

Ash - July 23, 2012 07:25 am

Hi Andy,

Here is another case of getting only # to href attribute with iPhone.
It's running at http://golfcoursesservice.apphb.com/Game/Create

Where course field is set to autocomplete.
The bug can only be reproduced in iPhone. Tested with Safari 5.1.7 with iPhone user agent but it was no use, works fine on desktop.

Also it has something to do with the way you click the list item in iPhone. Longer click will show the correct url but when you click it normally you'll get '#' as href.

Setup code:


var _this = this;
return $('#txtCourse').autocomplete({
method: 'GET',
source: '/api/CourseQuery/',
target: $('#CourseSuggestions'),
link: '/api/CourseInfo/',
callback: function(e) {
var $course, courseUrl;
$course = $(e.currentTarget);
$('#txtCourse').val($course.text());
log($course.get(0).tagName + ' clicked');
if ($course.get(0).tagName !== 'A') {
courseUrl = $course.find('a').first().attr('href');
} else {
courseUrl = $course.attr('href');
}
return _this.getCourseInfo(courseUrl, function(messages) {
var message, _i, _len, _results;
_results = [];
for (_i = 0, _len = messages.length; _i < _len; _i++) {
message = messages[_i];
_results.push(log(message));
}
return _results;
});
}
});
};


P.S. Thanks for the Plugin. :-)

JukkaP - July 23, 2012 10:32 am

Test
Vihti
Palo

At least those should return some data. Although it already starts querying when you type.

JukkaP - July 24, 2012 01:06 am

andy, thanks for this great plugin. saves me some time creating it myself

stealfish - July 24, 2012 04:32 pm

Hi Andy!

Thank you for this plugin. That is exactly what I was looking for.

I can't get it to work the way it should though..
Whatever i enter in the search field it will show ALL the options.

Here's my code:

<script type='text/javascript'>
$('#main').live('pageshow',function(e) {
$("#tillvem").autocomplete({
target: $('#listan'),
source: 'list.php',
link: '',
minLength: 1
});
});
</script>

(...)

<div data-role='page' id='main'>
<div data-role='content'>
<input type='text' id='tillvem' placeholder='Skriv ett namn...'>
<ul id="listan" data-role="listview" data-inset="true"></ul>
</div>
</div>

and here's the output of my list.php:
[{"label":"John Smith","value":"1"},{"label":"test user 2","value":"2"},{"label":"test user 3","value":"3"}]

rep - July 25, 2012 07:25 am

Thank you for you quick response.
I figured it out (but i don't understand it!)
It works if a paste the json containing the data i the html document like this:

$('#main').live('pageshow',function(e) {
$("#tillvem").autocomplete({
target: $('#listan'),
source:[{"label":"John Smith","value":"1"},{"label":"test user 2","value":"2"},{"label":"test user 3","value":"3"}],
link: '',
minLength: 1
});
});

Turned around the problem with including my php code i the main document..

rep - July 25, 2012 08:39 am

Ouch! Just spent hours trying to figure out why the auto complete loads fine when I first bring up the page, but any subsequent requests it's as if the listeners aren't getting triggered? I've looked around and some people seem to get past this problem using data-ajax = false, but this just isn't an option for me. I want to preserve my transitions.

My site is m.opina.com, anyone have ANY suggestions? I would really appreciate it!

Richard K - July 26, 2012 10:51 am

Hi Andy!

I got your plugin to work in my project and it works perfect. There is only one thing that I'm trying to achieve, but I just can't get it to work properly.

When the callback event is fired it enters the selected text in my textbox (so far so good), but if a user enters something and wants to continue without choosing something from the autocomplete, the list remains there.

Basically I'm trying to create something like a "focusout". I have tried the following: $("#id").focusout(function(){$(this).autocomplete('clear');});

This code works great, but it messes up the autocomplete callback function, so when a user actually chooses something from the list, it is not added. (focusout is fired before callback).

Do you have any suggestions?

Thanks in advance!

Joris Van den fonteyne - July 30, 2012 06:19 am

Hi andy, Can i use your plugin in order to update multiple fields? is possible pass a json object in the callback function?

Do you have any suggestions?

Thanks in advance!

Luca - July 31, 2012 05:07 pm

Hi there,

great work. I am trying to add a button to open the listview as the "combo" box.

I can see that :
$("#searchField").trigger('keyup.autocomplete');
opens the dialog and :
$("#searchField").autocomplete('clear');
closes it

but how do i check the status of the listview ? ie if it is open or not ?

sygram - August 13, 2012 05:16 am

Hi Andy, the plugin works great for me but if I try and use an input tag with type="search" to get the search icon, nothing happens. Looking at the generated code I still see my input with the Id I'm using to attach the autocomplete and it's type= "text" so I'm not sure why it dpesn't work. Any ideas?

Matt Reynolds - August 14, 2012 04:49 pm

Great job Andy! What if i wanted to access the inner properties of an element (from json data) through the callback function?

Example:
[
{
"id": "1"
"name": "Russel Crowe",
"email": "spartacus@coloseum.com"
},
{
"id": "2"
"name": "Vlad Tepes",
"email": "dracula@transilvania.com"
}
]

I'd like to allow the user to browse suggestion by typing both the name or the email (e.g: "vlad" or "drac") , then to set the input value to the only email value.

Marco - August 15, 2012 11:57 am

Thanks for the quick answer. That's exactly the workaround I implemented in case there were no way of passing two or more data sources. Just one more question: how do i select the email field to be set as the input value in the callback function?
Thanks in advantage

Marco Gagliardi - August 16, 2012 08:45 pm

Hi Andy. I did have the latest (well until you just updated it for "callback plus" - nice enhancement by the way).

I notice all your demos just use a text input for the search entry. I tried grabbing some of the search input styling but so far it looks a bit hokey.

It's not a major issue for me but I would like to understand why it doesn't seem to work.

Matt reynolds - August 17, 2012 09:44 am

Thank you Andy, so useful!

Marco - August 18, 2012 07:34 am

Hi there,

i posted a comment regarding an open/close icon. I surely hope someone will find it useful an answer my question above.

Regards

sygram - August 20, 2012 05:01 am

Thanks, i must have missed your comment. I will check that asap.

Regards

sygram - August 20, 2012 06:46 am

Hi Andy, I finally got the time to figure out why I couldn't get it to work with an input type of "search" - I was using the "pagecreate" event to attach the autocomplete. I needed to do some one-off work when the page was created so I added it to that callback. Once I moved the autocomplete into a "pageshow" callback, it worked fine.

I guess the extra decoration of a search input over a text input happens during pageshow and it can't attach properly until then.

Matt Reynolds - August 24, 2012 12:38 pm

Hi Andy, I got a problem when I type in the textbox the suggestvalues appear as expected, but when I clear the textbox, the suggestlist is still remaining. I have to choose a value otherwise the suggestlist wont be hidden.

Regards

Stephan - August 27, 2012 03:54 am

Hi Andy,
I just started using JQM and found this nice pluging to use.

I've added an optional param to it, to cut the number of items in the list so for long lists on small screen it doesn't clutter the page, with the side effect of speeding up the rendering which is always welcome. Not sure how to submit the code in case you want to add it, it might be useful to other people.

Thanks

Domenico Mangieri - August 29, 2012 10:39 am

Hi Andy, are you aware of any particular problem in using your autocomplete script with phonegap? It works perfectly to me on my browser but it doesn't work when I deploy it in my jqm app embedded in a webview through phonegap (android platform).

Any known issue or suggestion?

Marco

marco - September 01, 2012 05:40 am

I attach some further info to the post above:

-it works on my computer if I access the app @ localhost through the computer's browser
- it works on my mobile phone if i access the app connecting to the virtual http server on my pc through my mobile's browser
- it doesn't work if i just copy all the app's files into the phonegap application

marco - September 01, 2012 07:16 am

ok, the ultimate proof:

i tried to just follow the simple basic instruction provided on android phonegap's page:

http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

which explain how to create a basic app that simply open a link into a webview. Then I filled the loadUrl function with the page:

http://andymatthews.net/code/autocomplete/local_complex.html

without modifying any line or including any external script or library.

Autocomplete doesn't work :(

marco - September 03, 2012 11:07 am

Hi. I just found this awesome plugin, very useful, but for the project I'm doing I really need to use jqtouch, and when I and the plugin to it, most of it stops working, is anyone having the same problem?

Luis - September 05, 2012 11:39 am

Hi - thanks for sharing this. Looks just what I need. I have a question about the icon display on the suggestions. I seem to get a right arrow icon by default, without providing an icon parameter. What do I need to do to remove this? I tried using

icon: ''

but it still appears. Any suggestions?

Martin - September 06, 2012 10:04 am

great code...
but i got a problem i used it.. on android browser it working fine but on iphone or ipad auto-complete is not showing..

Sai Santhosh - September 08, 2012 06:03 am

Andy, i'm waiting hopefully for an answer about the phonegap issue :(

Marco - September 10, 2012 09:00 am

great plugin!

Is there a way to show all values without entering any search terms?

jeremiah - September 12, 2012 07:39 am

Wow, that was it. The obvious answer staring right at me the whole time.

jeremiah - September 13, 2012 07:04 am

Hi Andy,
It just does not display the ul list and no error seems to be thrown. Is there any debugging line you think i could insert to better find out where the problem is?

Marco - September 14, 2012 05:57 am

Hi Andy,
Thanks for providing a great feature. Everything works fine for me, except one...
The drop-down goes on giving me the suggestions as the letters are keyed in. No problem. But when a new letter is keyed in which makes the string not match any of the values returned from 'source' the drop-down suggestion list does not disappear. I want the drop-down to go away when the string does not match. How do I do this?

Here is my code:

$("#title").autocomplete({
target: $('#suggestions'),
source: serviceURL + "auto_complete.php", minLength: 1, callback: function(e) {
var $a = $(e.currentTarget);
$('#title').val($a.text());
$('#title').autocomplete('clear'); }
});

Amit - September 15, 2012 05:04 pm

Hi Andy,
I figured it out. But it was your comment that made me look deeper, since it looked like from your comment that there wasn't any apparent error in my js coding.

On debugging more, I found that I was not returning an empty array () when the match was not found from my PHP code. So I made the change in my PHP code as follows:

if (empty($return)) {
$return = array();
echo json_encode($return);
} else {
echo json_encode(array_values(array_unique($return)));
}

Returning an empty array() from the PHP code solved the problem.
Thanks,
Amit

Amit - September 15, 2012 10:45 pm

Hi Martin and Andy,
To get rid of the 'arrow-r' icon, please use the following attribute (icon: 'false'). I tried it myself and it worked. You do not need to edit any JS file or put in anything in CSS.

The example code is given below:

$("#title").autocomplete({
icon: 'false',
target: $('#suggestions'),
source: serviceURL + "auto_complete.php",
minLength: 1,
callback: function(e) {
var $a = $(e.currentTarget);
$('#title').val($a.text());
$('#title').autocomplete('clear');
}
});

Thanks,
Amit

Amit - September 16, 2012 09:27 am

Is there a way to implement a before autocomplete function - similar to the way jQuery has beforeSend with ajax - I have implemented something using jQuery's promise() object, but it doesn't seem like a good answer.

Anyway - in either case, it is a very well made app, and I am using it extensively and effectively.

Daniel - September 16, 2012 04:20 pm

Is there a way to implement a before autocomplete function - similar to the way jQuery has beforeSend with ajax - I have implemented something using jQuery's promise() object, but it doesn't seem like a good answer.

Anyway - in either case, it is a very well made app, and I am using it extensively and effectively.

Daniel - September 16, 2012 04:20 pm

Hi Andy,

I tried to populate a long list like 100 items, for example,

item1
item2
......
item100

and it's really slow. I am using jqm 1.2.0, cordova 2.1, jquery 1.8.2 and simulate in iOS env.

Appreciate if you have any advice. Thanks !

Cheers,
Mark

Mark Thien - October 06, 2012 08:01 am

Hello Andy,

We're having some trouble with using the autocomplete script and $.mobile.changePage method.

$.mobile.changePage is not working (freezes) after the user hits back on the browser

ex:

step 1. search (with autocomplete) -> $.mobile.changePage OK
step 2. back button
step 3. search (with autocomplete) -> $.mobile.changePage freezes

If we remove the autocomplete script from the $("#home").bind("pageshow", it works as expected.

Do you have any idea why this is happening?

Thanks for your help

Nicolas Mohamed - October 08, 2012 01:43 pm

Hello Andy, here's a jsfiddle (just the home page)

http://jsfiddle.net/nmohamed/wtajL/1/

Nicolas Mohamed - October 09, 2012 03:22 pm

Hello Andy, the error is:

TypeError: Object [object Object] has no method 'autocomplete'

Nicolas Mohamed - October 12, 2012 10:40 am

The versions are

* jquery 1.7.1
* jquerymobile 1.1.1
* autocomplete 1.4.1

Nicolas Mohamed - October 12, 2012 10:59 am

Couldnt find out the most basic things of all.. how do i get use of the value and the label.. not just the label, as in the complex example. Here's a fast and dirty, risky alternative

Just separate the values with the keyword ID
php:
...
$r = mysql_query($q);
//$row = mysql_fetch_row($r);
$numrows = mysql_num_rows($r);

$i = 0;
echo "[ ";
while($row = mysql_fetch_assoc($r)){

echo " {";
//echo ' "value":"' . $row['firm_id'] . '", ';

echo ' "label":"' . $row['name'] .' ID ' . $row['firm_id']. '"';
echo "}";

$i++;

if($i != $numrows){
echo ", ";
}

}
echo " ]";

...

jquery:
$("#mainPage").bind("pageshow", function(e) {
$("#searchBox").autocomplete({
target: $('#suggestions'),
source: 'datan.php',
callback: function(e) {
var $a = $(e.currentTarget);
var strRes = $a.text();
var substrRes = strRes.split('ID ');
$('#searchBox').val(substrRes[0]);
$("#searchBox").autocomplete('clear');
$('#getthisid').val(substrRes[1]);
$('#getthisid2').val(substrRes[1]);
},
link: '#',
minLength: 1,
matchFromStart: false
});
});

carl lindberg - October 25, 2012 01:04 pm

Hi Andy,

Great work! Thanks for all the efforts.

Is there a way I can use jquery mobile 'page' in the same html file (something like - link:'#divid') and still pass parameters using encodeURIComponent? When I try to do this, I get a 'syntax error, unrecognized expression' error. I am somewhat new to the world of JS/JQM so still learning my way around the syntax.

Nikhil - November 03, 2012 06:35 am

Hi Andy,

I am new to the jquery mobile, I like your autocomplete plugin. However, I am having trouble to dynamically populate the suggestion list using Spring. Hope you can help,

$("#searchField").autocomplete({
target: $('#suggestions'),
source: "${pageContext.request.contextPath}/suggestTerms?partialTerm="+$("#searchField").text()+"\"",
callback: function(e) {
},
link: '',
minLength: 2,
matchFromStart: false
});

The json string is returned from the server, however, it doesn't show up. Do you expect url in the source field? I am quite confused. Thanks.

Ching - November 05, 2012 04:03 pm

G'day Andy,

I have successfully implemented this great plugin that Ray Camden and yourself have created, thanks.

I have a small issue summarized as: I select the option from the dropdown list, I then display a popup and after closing the popup the search box receives focus and the soft keyboard appears on iOS. The web app then continues as intended. Basically I would like to stop the keyboard from appearing.

I am happy to send you the site address via a PM.

Any ideas on what could be done to "fix" this?

Cheers, Anthony

Anthony - November 05, 2012 05:35 pm

Hi Andy,

I really hope I'll be able to use your plugin since I'm unable to find a way to style the jQuery UI autocomplete on android.

I was wondering: is it possible to use a source not in the format value-label?
Something like

{
"array1": [
...
],
"results": [
{
"name": "404",
"id": "someID"
"someParam": {

...

using as parameter for the autocomplete "name" and "id"?
Can I use the callback for that or is that only when the list has already been created and managing the click?

Thanks in advance.
Francesco.

Ciack404 - November 07, 2012 04:15 am

Hi Andy,

Great plugin but unfortunately I need to confirm Marco's post from Sept 1st that it does not work with PhoneGap (Cordova).

Happy to provide debug info if you would like, maybe together we can get it working.

DrKolos - November 11, 2012 04:31 am

Hi Andy,

thanks a lot for your reply.
Actually I modified the plugin for my needs. I had to modify it also to make it compatible with iScroll (in order to have a limited number of visible results inside a scrollable div) and they work pretty well together.

Just added a refresh both for the iscroll and jquery mobile after adding an autocomplete element.

Again, thanks for the reply and the plugin.
Francesco.

Ciack404 - November 12, 2012 03:23 pm

Hey Andy,

Thanks for this plugin, it's really useful. I'm having problems after POSTing a form. I'm using jQM 1.2 and jQ 1.7.2 with your plugin. Also using .NET MVC 3 if that helps at all.

When the page loads through a GET request, everything is working perfectly fine...the autocomplete works exactly as we want it to.

However, after POSTing a form, when the page loads, the autocomplete no longer works. With Firebug, we are getting the following error in the console:

Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'

I've been banging my head against the wall for hours on this and I can't figure out where the problem is. This is how it is being initialized on the page:

$(document).live("pageinit", function () {
$('#items input[type="text"]').each(function () {
if ($(this).hasClass('material')) {
BindSearchOperation(this);
$(this).click(function () {
$(this).select();
});
}
});
});

If I disable AJAX for the form, and it loads the page entirely, it works just fine, however...so it seems that its something not being loaded properly when using the AJAX request...

Any ideas? I'm completely stumped. Thanks a million.

Mike

Mike - November 14, 2012 11:27 am

Hey Andy,

Sorry, I didn't post the contents of the BindSearchOperation function contains the binding of the autocomplete to the text box, which is happening within pageinit...am I missing something there?

Thanks
Mike

Mike - November 19, 2012 11:43 am

Hi Andy,

Thanks for your advice on a possible solution on my soft keyboard trigger problem. I went off on a tangent and figured out that when I was using $('selector).click(function() I would get the soft kb, when I changed to $('selector').live("click", function(), there was no problem. I've subsequently changed to $(document).on('click', 'selector, function(), which also works for me. Thought I'd share.

Anthony

Anthony - November 23, 2012 05:19 am

Hi Andy,

This is a really great piece of software - thanks!

I'm having a little trouble with performance on long lists of results, and would greatly appreciate input (anyone, please feel free).

My current project's data has a few letter combinations that return a very large list of results. This gives the appearance of freezing the phone while the long list gets determined & rendered. Subsequent search refinements of course speed up as the list gets shorter.

Instead of making a new database call with each keypress, I pull all the options into an array on the page (thinking having the data locally will help performance - am I wrong?). The page renders quickly

I'm using mysql/php for the data, putting it into an array for autoComplete to use. I've tried adjusting the minLength & the Interval to accommodate additional refinements, hoping to skip the long list issue, but couldn't find a happy medium.

Code:
while($array=mysql_fetch_assoc($rsData))
{
$dataOptions[]=$array['model'];
} ?>

$("#mainPage").bind("pageshow", function(e) {
var availableTags = ;
$("#MFsearchField").autocomplete({
target: $('#suggestions'),
source: availableTags,
link: 'results?match=',
minLength: 3, // would much prefer 2
matchFromStart: false,
transition: 'slide',
interval: 2000
});
});


Please let me know what I'm doing wrong.

Thanks in advance,
Gary

Gary - November 29, 2012 05:00 pm

Hi Andy,
howo can i update the url? it reads the url from a hidden field. but the url can be changed on userinput.

example:

$("#il_src").autocomplete({
target: $('#il_src_target'),
source: '/index.php?page=callback&page_action=xt_admin_urun_guncelleme&adressAction=1&type=city'+newId,
link: '',
transition: 'fade',
minLength: 2,
liststyle: 'normal',
icon: 'false',
callback: function(e) {
var $a = $(e.currentTarget);
$('#il_src').val($a.text());
$('#manufacturers_il_hidden').val( $a.data('autocomplete').value);
$("#il_src").autocomplete('clear');
},
onLoadingFinished: function (e) {
//alert($("#suggestionsManufacturer2 li").size());
},
matchFromStart: false
});

Fatih - December 08, 2012 10:04 am

Thanks Andy, I tried the interval but no dice. Ended up refining the data being searched to produce a more targeted results set to search.

Gary - December 11, 2012 06:54 pm

Any chance I could interest you in adding an option for the search to ignore hyphens and spaces? Would be huge for me.

Gary - December 11, 2012 06:57 pm

Hi Andy,

Thank you for the plugin code. It really helps me a lot!!

I am new to jquery. So not much aware of the flow here.
The tag list(array) returns around 10000 records. So in search, it is very much slow.. Is there any way that it searches only for the word entered in the text box. I do have a feeling that it my case it fetches all the tag list and then sort it as per the text entered on the text box

I am using asp.net MVC.

@using (Html.BeginForm("Search", "Title", FormMethod.Post, new { id = "searchPage" }))
{

Hi to all,

i've got a question that it might be more relative to mobile user interface design but is bugging me lately. If my search box is on the top of the page, the list is partially displayed as i type the characters, so the user knows that something is happening and he has to select from a list. When i give the focus to an autocomplete at the bottom of the page the suggestion list is not displayed at all as it is totally covered by the text input keyboard of my mobile tel, so the user does not know what is happening so he has to close the input keyboard to view the suggestions.

Is there a common effect that i can do to improve the user interface ? or is this a custom thing for mobile user. Perhaps if the first and half of the second option was always shown then he might get the idea.

Regards,

Leon

Leon - December 14, 2012 08:10 am

Anyone else run into an issue where the keyboard on Android overlaps the autocomplete that pops up?

Andy - December 23, 2012 03:40 pm

When I search with the same letter twice, it won't give me any results on the second search. Is there a way to fix this?

Calado - December 28, 2012 09:46 am

How do I disable page reload when user select element from the list?

Michel Gange - January 11, 2013 10:39 am

Really nice plugin Andy!

I've been playing around with jqm and came across this plug-in. I'm just wondering if it's possible to load custom-data in it from any JSON object like in this example.
http://jqueryui.com/autocomplete/#custom-data

I'm just trying to make the geoname jquery UI autocomplete example work with this plug-in

Iván.

Iván - January 23, 2013 09:29 am

thank you Andy!

I've finally used the on page data approach in my own example. If someone could find it useful I've just uploaded to jsfiddle:

http://jsfiddle.net/hopcroft/PSdF5/1/ (I don't like the setTimeout neither...)

The problem with this approach is that I need to save the whole JSON object in the client and look for information on it.

I've tried some other approaches but they aren't working:
http://jsfiddle.net/hopcroft/R7tJj/ (it doesn't send the proper param to filter the response)

http://jsfiddle.net/hopcroft/ybpJT/ (I don't know why isn't working on jsfiddle, but on my local env it tries to format the object response unsuccessfully)

Iván - January 24, 2013 06:05 am

I want to use this plugin to search for bird species names. There is a 4-character code for each bird.
RTHA = Red-tailed Hawk
HOSP = House Sparrow
etc.

1. Is it possible to set up an object where the match occurs on the 4-character code, but the species name is used on the buttons and the link?

2. Or provide a match on either the 4-character code or the species name.

3. Is it possible to have an application provided routine that does the compare.

I assume that one would allow a match on the full species name or the 4-character code.

Thanks.

David Cahlander - January 26, 2013 10:06 am

I've a problem with the new version and singole quote

roche - January 31, 2013 07:51 am

Hi Andy!

Thanks for the awesome plugin mate!

I'm just wondering how to best approach including enable/disable methods into your plugin?

Under certain situations, I don't want the autocomplete to fire... but I don't want to destroy and then make the full autocomplete declaration again.


Help!

Andy T

Andy Tan - January 31, 2013 10:53 pm

Hi Andy, This is great and the best thing is the search is much faster than the filter built into the jqm listview - there are plenty of posts elsewhere (and no real solutions that I have found) about how slow the filter works in iOS (even if the min length of search string is set to more than 1).
It would be good to use your autocomplete to completely replace the built-in listview filter, but that would need the listview to be displayed before anything's entered into the search box, and also to redisplay the (unfiltered) list if the search box is emptied again by backspacing. I tried modifying your code to do this but I'm not experienced enough!

quilkin - February 03, 2013 04:47 pm

Can u help, if possible, to show an example that autocomplete works in multiple input fields? Thanks.

Ching - February 05, 2013 07:12 pm

Thank u for ur reply. I figured it out, it was caused by a stupid JavaScript error. Thanks again for ur quick response.

Ching - February 06, 2013 06:59 pm

Hi there,

i've recently noticed that the performance of this autocomplete is much better than the one of jquerymobile, especially on large sets !

Good Job !

sygram - March 19, 2013 08:10 am

Thank Andy. Good job!

steve - April 07, 2013 08:59 am

Hi Andy, I have modified search.html into search.php to change target link to same page search.php?q= .

steve - April 07, 2013 09:01 am

I am posting normal content, but keep getting:
Your post is considered spam. Sorry, but we do not allow that.

steve - April 07, 2013 09:05 am