Menu
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
696
In the process of searching a specific value, the jQuery UI autocomplete selection feature provides the user with some string suggestions for the input area which effectively saves time. The autocomplete select action is triggered when the user selects one of the options from the pre-populated list.
The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. The datasource is a simple JavaScript array, provided to the widget using the source-option.
Syntax: $("TagId"). autocomplete({ source : itemList // List of Words. })
Here we will make autocomplete textbox, in which make list pre-populated search result with image. This feature we will make by add custom html tag in jQuery UI autocomplete method by add _renderItem. Here we will use __renderItem method, by using this method we will add custom HTML code in autocomplete textbox.
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.
100
For future reference I recently released an autoComplete plugin written specifically for use with jQuery Mobile:
http://www.andymatthews.net/code/autocomplete/
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
