jQueryUI的自動完成插件不工作

但是我不能這樣做。這裏是我的代碼：

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
    <script src="../Scripts/jquery.autocomplete.js" type="text/javascript"></script> 
    <link href="../Styles/jquery.autocomplete.css" rel="stylesheet" type="text/css" /> 
    <script src="../Scripts/JScript-1.5.1.js" type="text/javascript"></script> 
    <script src="../Scripts/jQueryUI.js" type="text/javascript"></script> 

<script type ="text/javascript"> 
$(function() { 
    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 
    $('[id$="tbSearch"]').autocomplete({ 
     source: availableTags 
    }); 
});

<asp:TextBox ID="tbSearch" runat="server"></asp:TextBox>

沒有被顯示在我的文本框下拉：tbSearch。這裏出了什麼問題？

來源

2011-03-29 RG-3

@Marek：不。tbSearch是一個文本框，它具有runat =「server」屬性。 – 2011-03-29 14:16:10

@ klm9971 ...你真的導入了jQuery嗎？ =「text/javascript」src =「path/to/source/jQuery.js」>' – Hristo 2011-03-29 15:16:08

@Hristo：請在我的最新編輯中提問。 – 2011-03-29 15:17:55

請記住，在ASP.NET中，在代碼文件或代碼中引用該控件時使用該控件的ID，並且在呈現爲HTML時不是輸入字段的實際ID。查看您的頁面的來源以查看實際ID。你可能想是這樣的：

$("#<%= tbSearch.ClientID %>").autocomplete({ 
...

或

$("input.autocomplete").autocomplete({ 
... 

<asp:TextBox ID="tbSearch" runat="server" CssClass="autocomplete"/>

希望有所幫助。

來源

2011-03-29 15:52:22 matt

這個ClientID是什麼意思？我的代碼中沒有任何這樣的參數。 – 2011-03-29 15:55:33

ClientID是控件呈現給頁面時DOM元素具有的實際Id。嘗試查看頁面的源代碼 - 您可能會注意到，您提供給WebControls和UserControl的ID不一定與頁面中實際發現的ID匹配 - 例如，上面的文本框的ID可能實際上渲染到「ctl100_Content_tbSearch」之類的東西。看到這個更多的細節：http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx – matt 2011-03-29 16:03:57

好吧！謝謝Rich。我對上面的代碼進行了更改。請祝你好運。 – 2011-03-29 16:06:13

兩個問題：

您的代碼來就是了影響HTML之前。
即使你修復（1），你也會遇到這樣的問題：客戶端的「id」值不會被編碼到你的ASP標籤中。你必須調用一些ASP來獲得客戶端的價值。

哦等等：同樣，它是「.click」，而不是「.Click」。

在「成功」處理程序中聲明/定義「數據」變量時，使用var關鍵字也是一個非常好的主意。

編輯 —通知，在例子你的問題掛鉤，jQuery的設置代碼是一個jQuery的「準備」處理程序中。這將確保問題1得到解決。我不確定爲什麼要將「點擊」處理程序連接到「文本框」元素;如果這樣會產生一個<input type="text">標籤，那麼你不會從中得到任何點擊（我不認爲）（編輯這是錯誤的）;即使你做了，也很奇怪。

來源

2011-03-28 20:09:04 Pointy

感謝尖。我基本上使用母版頁到我的測試頁面。那麼我應該在哪裏放置我的代碼？在testing.aspx中。 – 2011-03-28 20:13:46

我不是一名ASP程序員，所以我不確定如何處理「id」問題;我知道這是一件非常簡單的事情，但它在Stackoverflow中的答案在這裏和那裏。您鏈接的示例代碼顯示如何使用'$（document）。ready（function（）{...}）;'用於初始化代碼。 – Pointy 2011-03-28 20:19:48

你能看到我更新的代碼嗎？謝謝！ – 2011-03-28 20:25:05

一個問題我在這裏看到的是，如果引用ID「tbSearch」如下：

$("#tbSearch").autocomplete(data);

然而，一旦在.NET框架呈現此網頁，文本框的客戶端ID就會大大不同。您可以改用以下，以確保你在你的jQuery代碼引用ID是正確的：

$('#<%= tbSearch.ClientID %>').autocomplete(data);

一對夫婦的事情可以做調試了蝙蝠的權利：

給你的jQuery .ajax調用添加一個錯誤處理程序。

error: function (xmlHttpRequest, textStatus, errorThrown) { 
     alert(errorThrown); 
    }

在您的web方法中設置斷點。你打了嗎？

來源

2011-03-28 20:46:40 Keith

我應該在哪裏設置錯誤處理程序？ – 2011-03-28 21:03:19

我在加載頁面後立即調用此JQ。 – 2011-03-28 21:03:52

沒有，它沒有工作。看到我更新的代碼！ – 2011-03-28 21:05:42

基思指出，要覆蓋你從服務器得到響應：

success: function (data) {      
    data = msg.d.split(" ");    
    $('#<%= tbSearch.ClientID %>').autocomplete(data);     
}

也許你正在嘗試做的是：

data = data.split(" ");

當你點擊你的文本框，Click（）事件被觸發，你所做的只是爲自動完成提供數據。你實際上並沒有調用下拉菜單。要做到這一點，你需要調用搜索方法。另外，請記住，有一個的minLength屬性，它可以防止打開下拉菜單：

//Set the minLength to zero 
$("#tbSearch").autocomplete("minLength", 0"); 
//Now invoke the search 
$("#tbSearch").autocomplete("search", "");

來源

2011-03-28 23:35:19 essedbl

在您的Ajax請求你要發送的數據。

假設你正在使用這個插件http://docs.jquery.com/Plugins/autocomplete

嘗試使用

$("#tbSearch").autocomplete("AgentList.aspx/LoadData");

並在Web服務返回一個數組

來源

2011-03-29 14:29:04

我編輯了我的問題上面。你有什麼建議，它仍然沒有啓動。是的，你是對的，我正在跟蹤這個鏈接：http://docs.jquery.com/Plugins/自動完成 – 2011-03-29 14:53:04

我在這裏做了一些假設，但它看起來像你'錯誤地使用自動完成插件。您正在附加到文本框上的更改事件，並基於該文本框的名稱，我假設您正在尋找基於用戶輸入的搜索建議使用自動完成功能。

如果是這樣的話，那麼你只需要在自動填充功能附加到文本框以這樣的方式

$(document).ready(function() { 
    $("#tbSearch").autocomplete("AgentList.aspx/LoadData"); 
});

該插件將採取AJAX請求—你不必照顧。

來源

2011-03-29 15:07:12

我這樣做了，但我沒有從UI中獲得任何東西 – 2011-03-29 15:34:09

您的asp:TextBox雖然ID設置爲「tbSearch」，但不會完全是當它進入您的瀏覽器。 ASP.NET爲您的標識添加了一些內容，這有助於識別您的控制服務器端。

試試這個：

$('[id$="tbSearch"]').autocomplete({ 
    source : availableTags 
});

來源

2011-03-29 15:54:07

我修正了我的問題。請再次查看。謝謝！ – 2011-03-29 16:01:58

充分發揮作用的例子

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /> 
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> 
    </script> 
    <script type="text/javascript" charset="utf-8" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() {   
     var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "JavaScript", 
      "Lisp", 
      "Perl", 
      "PHP", 
      "Python", 
      "Ruby", 
      "Scala", 
      "Scheme" 
     ]; 
     $('#tbSearch').autocomplete(availableTags); 
     }); 
    </script> 
    </head> 
    <body> 
    <input type="text" id = "tbSearch" name="code"> 
    </body> 
</html>

來源

2011-03-29 20:13:43

jQueryUI的自動完成插件不工作

回答

相關問題