獲取jQueryUi自動完成與jQueryMobile一起工作

我正在使用一些需要自動完成功能的表單域來處理jQueryMobile應用程序。我正在使用jQueryUi自動完成插件，但無法使其正常工作。它工作正常，如果我的表單是在瀏覽器中加載的初始頁面，但如果表單稍後通過jQueryMobile ajax加載機制加載，則不起作用。獲取jQueryUi自動完成與jQueryMobile一起工作

我正在使用的版本是：
jQueryMobile：1.0a4.1
jQueryUI的：1.8.9
jQuery的：1.4.4

我的自動完成功能如下：

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

我的想法是，這需要連接到當前活動頁面，但我不知道如何做到這一點。有人可以讓我知道如何做到這一點？

此外，我沒有綁定到jQueryUi自動完成解決方案。如果有更好的方法來做到這一點，請讓我知道。

謝謝
格雷格

來源

2011-05-13 Greg Enslow

現在，jQuery Mobile的已經成熟了不少，並且正在接近它的1.0版本，我決定採取另一種刺在得到這個正常工作。我取得了很好的成績，所以我想在此分享解決方案。

這裏是我現在正與（如01 - 2月 - 2012年）工作的版本：

jQuery Mobile的1.0.1
的jQuery 1.6.4
jQuery UI的1.8.12

引用腳本的順序非常重要。它需要是jQuery，jQuery UI，jQuery Mobile，然後是您的自定義腳本文件。我的頁面頭部看起來像這樣：

<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>

全部自動完成代碼應該是在一個單獨的.js文件，應該鏈接到最後一個文件。在這個示例中，mine是script.js。

接下來，確保您的所有頁面div（data-role ='page'）也有一個id集。例如，在我的搜索頁上，我有

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

既然所有頁面div都有id，那麼您可以綁定到該div的jQuery Mobile pagecreate事件。在一個標準的jQuery網頁你會像這樣的自動完成：

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

要做到等價的，但把它掛在特定頁面的div看起來是這樣的：

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

這一直到目前爲止我的工作很好。我已經能夠去掉大部分數據--ajax =「false」屬性作爲解決方法。這反過來又導致了更好的應用程序性能。我絕不會在jQuery UI和jQuery Mobile之間進行徹底的兼容性測試，因此您的里程可能會有所不同。如果遇到此方法的任何問題，請在此留言。祝你好運。

來源

2011-10-29 00:52:49

我只是試圖複製這個例子，我總是有相同的問題。提交表單後，用戶重定向回到同一頁面;但是，自動填充字段不再起作用。這是否仍然按預期工作？是否需要修改？ – 2012-02-16 05:31:53

腳本的重新排序爲我做了。移動前必須包含jQuery-UI。 – 2013-06-28 09:27:17

'.live'已被刪除。現在應該使用'.on'。也許編輯你的文章，這反映了這一點？ – DJTripleThreat 2013-10-17 06:49:28

我不知道它是否適合你的情況，但一個解決方法是添加數據阿賈克斯=「假」屬性，以防止頁面被加載由阿賈克斯。

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

來源

2011-05-16 12:30:15 Ingo

是的，我已經使用，作爲一個臨時的解決辦法，但它不是一個很好的長期解決方案。我正在尋找一個可以正確使用框架的解決方案。謝謝。 – 2011-05-16 16:25:50

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

來源

2011-06-09 15:21:41

以供將來參考我最近發佈了一個自動完成插件專爲使用寫有jQuery Mobile的：

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

來源

2012-04-02 01:22:41 commadelimited

jQuery Mobile的現在有自動完成，其中結果被填充在ListView。他們的demo page有很多關於如何實現本地和遠程數據的例子。

來源

2013-04-22 18:28:51 MForMarlon

我已經做了一堆搜索。 jQuery UI自動完成類型的工作來修改鍵入文本框。 jQuery Mobile過濾器搜索框模擬一個自動運行，但我真的沒有發現它與實際的數據收集表單一起使用非常有用。

這篇文章讓我開始使用jQuery UI自動完成，但我一直在運行格式化問題。我最終只寫了自己的ajax（目前）自動完成，並認爲我會分享它。源代碼可以讓你根據自己的喜好進行調整。也許有人可以接受並改進它，或者直接使用它。

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

來源

2013-11-09 08:50:44

我最近發佈了一個自動完成組件與零依賴。（no-jQuery）

這完全支持大多數手機瀏覽器，如Android，iOS。

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

來源

2016-03-28 14:22:35 superui

獲取jQueryUi自動完成與jQueryMobile一起工作

回答

相關問題