发表新帖
发表新帖

Getting jQueryUi Autocomplete to work with jQueryMobile

前端 未结
关注
7 480
礼貌的吻别
礼貌的吻别 2020-11-29 08:41

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 w

相关标签:
7条回答
  • 面向向阳花
    2020-11-29 09:01

    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.

    0 讨论(0)
  • 有刺的猬
    2020-11-29 09:12

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

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

    0 讨论(0)
  • 鱼传尺愫
    2020-11-29 09:13

    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

    0 讨论(0)
  • 情话喂你
    2020-11-29 09:14

    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/

    0 讨论(0)
  • 甜味超标
    2020-11-29 09:19 
    $('div').live('pagebeforecreate',function(event,ui){
    // do something in jquery
});
    0 讨论(0)
  • 北恋
    2020-11-29 09:23

    I recently released an autoComplete component with zero-dependency. (no-jQuery)

    This completely support most mobile browser like Android, iOS.

    https://github.com/skplanet/sweetsearch/

    0 讨论(0)
 看不清?
提交回复
热议问题