Getting jQueryUi Autocomplete to work with jQueryMobile

Asked 13/5, 2011 at 16:20 Answered 28/3, 2016 at 14:22

Solved jquery-mobile jquery-ui-autocomplete

I'm working on a jQueryMobile application with some form fields that need auto complete functionality. I'm working with jQueryUi Autocomplete plugin but can't get it to work properly. It works fine if my form is the initial page loaded in the browser but doesn't work if the form is loaded later via the jQueryMobile ajax loading mechanism.

The versions I'm working with are:
jQueryMobile: 1.0a4.1
jQueryUi: 1.8.9
jQuery: 1.4.4

My auto complete function looks like this:

$(function () {
    $('#search').autocomplete({
        source: '/Autocomplete/SearchAutoComplete',
        minLength: 3,
        select: function (event, ui) { }
    });
});

My thinking is that this needs to be wired up to the current active page but I'm not sure how to do this. Can someone let me know how to accomplish this?

Also, I'm not tied to the jQueryUi autocomplete solution. If there is a better way to do this, please let me know.

Thanks,
Greg

Frankish answered 13/5, 2011 at 16:20 Comment(0)

Now that JQuery Mobile has matured quite a bit and is getting close to it's 1.0 release, I decided to take another stab at getting this to work properly. I've had good success so I'd like to share the solution here.

Here are the versions I am now currently working with (as of 01-Feb-2012):

jQuery Mobile 1.0.1
jQuery 1.6.4
jQuery UI 1.8.12

The order in which the scripts are referenced is critical. It needs to be jQuery, jQuery UI, jQuery Mobile, then your custom script file last. My page head looks like this:

<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
   <title>My jQM App</title>
   <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
   <script src="/Scripts/script.js" type="text/javascript"></script>
   <link rel="stylesheet" href="/Content/style.css" />
</head>

All of the autocomplete code should be in a separate .js file and should be the last file linked to. In this sample, mine is script.js.

Next, make sure that all of your page div's (data-role='page') also have an id set. For example, on my search page I have

<div data-role="page" id="searchPage">

Now that all the page div have id's you can bind to the jQuery Mobile pagecreate event for that div. In a standard jQuery page you would have something like this for the autocomplete:

$('#search').autocomplete({
    source: '/Autocomplete/SearchAutoComplete',
    minLength: 3,
    select: function (event, ui) { }
});

To do the equivalent but have it hooked up to the specific page div looks like this:

$('#searchPage').live('pageinit', function (event) {
    $('#search').autocomplete({
        source: '/Autocomplete/SearchAutoComplete',
        minLength: 3,
        select: function (event, ui) { }
    });
});

This has been working well for me so far. I've been able to strip out most of data-ajax="false" attributes I had in place as a workaround. This, in turn, has resulted in better application performance. I have by no means done an exhaustive compatibility test between jQuery UI and jQuery Mobile so your mileage may vary. Please leave a comment here if you run into any problems with this method. Good luck.

Frankish answered 29/10, 2011 at 0:52 Comment(3)

I just tried to replicate this example and am having the same issues as always. After submitting the form, the user is redirect back to the same page; however, the autocomplete field no longer functions. Is this still working as expected? Have there been any modifications required? – Hoist 16/2, 2012 at 5:31

The re-ordering of the scripts did it for me. jQuery-UI must be included before mobile. – Togo 28/6, 2013 at 9:27

.live has been removed. .on is now what should be used. Maybe edit your post so it reflects this? – Starchy 17/10, 2013 at 6:49

For future reference I recently released an autoComplete plugin written specifically for use with jQuery Mobile:

http://www.andymatthews.net/code/autocomplete/

Linetta answered 2/4, 2012 at 1:22 Comment(0)

$('div').live('pagebeforecreate',function(event,ui){
    // do something in jquery
});

Rosser answered 9/6, 2011 at 15:21 Comment(0)

I have done a bunch of searching. The jQuery UI autocomplete sort of works for modifying a typing text box. The jQuery Mobile filter search box simulates an autocompete but I really didn't find it very useful for use with an actual data collection form.

This article got me started using the jQuery UI autocomplete but I kept runing into formatting problems. I ended up writing my own ajax only (at the moment) autocomplete and thought I would share it. The source is there for you to tweak as you see fit. Maybe someone can take it and improve it or just use it as it stands.

http://schworak.com/blog/e75/jquery-mobile---autocomplete-text-input/

Mirthamirthful answered 9/11, 2013 at 8:50 Comment(0)

I'm not sure if it is applicable in your case but a workaround would be to add the data-ajax="false" attribute to prevent the page to be loaded by ajax.

http://jquerymobile.com/demos/1.0a4.1/#docs/pages/link-formats.html

Landry answered 16/5, 2011 at 12:30 Comment(1)

Yes, I have used that as a temporary work around but it's not a good long term solution. I'm looking for a solution that works correctly with the framework. Thanks. – Frankish 16/5, 2011 at 16:25

jQuery Mobile now has autocomplete, where the results are populated in a listview. Their demo page has great examples on how to implement it, for both local and remote data.

Recommended topics

Hot tags