使用jQuery自動完成難度

我使用jQuery的自動完成，但有做太困難加載自動完成在文本框中使用jQuery自動完成難度

我的模型如下：

Users = new List<string>(); 
foreach (var item in User.LoadSortedByName()) 
{ 
    Users.Add(item.Name+"\n"); 
}

查看：

<p>@Html.TextBox("user", "") 
$(function() { 
      $("input#user").autocomplete('@Model.Users'); 
});

更新 - 簡化嘗試，仍然無法運作

_layout

<script src="@Url.Content("~/Scripts/jquery.autocomplete.js")" type="text/javascript"></script> 

View 


    <p><input type="text" id="tags" /></p> 

<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" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags 
     }); 


    });

來源

2011-03-18 learning

@ user281180 - 請問您有任何這方面的進展如何？ – 2011-03-23 11:44:59

@Sergi，謝謝你的例子。我嘗試了一個簡單的自動完成示例，似乎自動完成功能根本不起作用。請參閱我的代碼，儘管我引用了jquery.autocomplete.js，但它似乎不起作用。請參閱我的工作測試，不能理解爲什麼它不起作用。 – learning 2011-03-24 10:53:05

@Sergi，我已經修改了代碼，現在只需一個簡單的測試，似乎自動完成工作根本不起作用。請參閱新代碼 – learning 2011-03-24 11:00:30

實際上，您應該將自動填充行爲附加到文本框中。

也就是說，如果你問我，jQuery庫中包含的自動完成版本並不完全簡單。

$("input#user").autocomplete({ 
    source: function (request, response) { 
     // define a function to call your Action (assuming UserController) 
     $.ajax({ 
      url: '/user/GetUsers', type: "POST", dataType: "json", 

      // query will be the param used by your action method 
      data: { query: request.term }, 
      success: function (data) { 
       response($.map(data, function (item) { 
        return { label: item, value: item }; 
       })) 
      } 
     }) 
    }, 
    minLength: 1, // require at least one character from the user 
});

在你的控制器中，定義了以下行動

public ActionResult GetUsers(string query) 
{ 
    var users = (from u in User.LoadSortedByName() 
       where u.Name.StartsWith(query) 
       orderby u.Name // optional but it'll look nicer 
       select u.Name).Distinct().ToArray(); 

    return Json(users); 
}

此實現不會讓你的文本框的多個值;關於如何做到這一點檢查基礎上最終解決

的jQuery autocomplete examples

UPDATE請確保您有在jQuery UI的核心的參考例子。

從微軟CDN：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>`

從谷歌CDN：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>

或者自己從official jQuery UI Page

來源

2011-03-18 12:28:25

我不認爲你「負載在文本框」，但更多的「自動完成連接到」文本框。嘗試爲自動填充的「答案」創建一個JavaScript數組。

這也有助於瞭解您是否使用jQuery UI或舊版插件自動完成。

來源

2011-03-18 12:20:29

我公司開發的插件形式的HTML擴展下載，使用jquery ui自動完成，但在一個非常簡單和動態。語法是這樣的事情在這裏

 [email protected](model => model.Id, x => x.Code , "List")

我將所有的源代碼可用（建議，歡迎），幷包含一個zip文件，所有必要的文件。希望有所幫助！

項目URL http://autocompletemvc.codeplex.com/releases/view/70140

的bin文件 http://autocompletemvc.codeplex.com/releases/70140/download/259741

來源

2011-07-17 14:52:43 Paulo

您的幫手對部分視圖的依賴性使其幾乎無法使用。 – 2011-07-29 20:07:51

使用jQuery自動完成難度

回答

相關問題