bootstrap typeahead in asp.net webforms

Question

Я ищу хороший пример того, как я могу реализовать bootstrap typeahead с помощью приложения веб-форм asp.net. Приложение уже использует тему начальной загрузки и различные плагины. Теперь я хочу, чтобы пользователь мог выполнять поиск по набору данных с минимальными тремя введенными буквами. После ввода пользователем трех букв сценарий будет запущен, чтобы начать поиск значений, соответствующих введенному слову, с помощью веб-метода, а затем доставить результаты пользователю. Из примеров, которые я видел до сих пор в сети у меня есть это:

[WebMethod] 
     [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
     public List<string> GetNames(string term) 
     { 
      // A list of names to mimic results from a database 
      List<string> nameList = new List<string> 
      { 
       "Jonathan", "Lisa", "Jordan", "Tyler", "Susan", "Brandon", "Clayton", "Elizabeth", "Jennifer" 
      }; 

      var results = nameList.Where(n => 
       n.StartsWith(term, StringComparison.OrdinalIgnoreCase));   
      return new JsonResult() 
      {     
       Data = results.ToArray(), 
       JsonRequestBehavior = JsonRequestBehavior.AllowGet 
      }; 
     } 

На фрагменте кода выше JsonResult() и JsonRequestBehavior не признаются, и я получаю сообщение об ошибке. Тогда на стороне клиента, у меня есть это:

<input type="text" id="txtSearch" data-provide="typeahead" runat="server" /> 

Затем скрипт у меня есть это (также найти в Интернете):

<script type="text/javascript"> 
     $(document).ready(function() {    
      $('#<%= txtSearch.ClientID %>').typeahead({ 
       source: function (query, process) {          
       }, 
       updater: function (item) { 
        // implementation 
       }, 
       matcher: function (item) { 
        if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) { 
         return true; 
        } 
       }, 
       sorter: function (items) { 
        return items.sort(); 
       }, 
       highlighter: function (item) { 
        var regex = new RegExp('(' + this.query + ')', 'gi'); 
        return item.replace(regex, "<strong>$1</strong>"); 
       }, 
      }); 
     });  
</script> 

каждая помощь приветствуется. Снова, я использую веб-формы asp.net с twitter bootstrap. Спасибо заранее, Лациале

Answer 1

попробовать это

<input type="text" id="txtSearch" data-provide="typeahead" runat="server" /> 

//No javascript only add bootstrap.js or typeahead js and css 

     protected void Page_Load(object sender, EventArgs e) 
    { 
     List<string> nameList = new List<string> 
     { 
      "Jonathan", "Lisa", "Jordan", "Tyler", "Susan", "Brandon", "Clayton", "Elizabeth", "Jennifer" 
     }; 
     string str = ""; 
     for (int i = 0; i < nameList.Count; i++) 
     { 
      str = str + '"' + nameList[i].ToString() + '"' + ','; 
     } 
     if (str != "") 
     { 
      str = str.Remove(str.Length - 1); 
     } 
     str = "[" + str + "]"; 
     txtSearch.Attributes.Add("data-source", str); 

    } 

Answer 2

Вы можете попробовать это:

TextBox:

<asp:TextBox ID="txtBuscar" runat="server" CssClass="span3" placeholder="Text..." data-provide="typeahead" autocomplete="off" data-items="4"></asp:TextBox> 

данных-элементы = п элементы списка

Код позади:

string asdf = "[\"Francisco\", \"Maria\", \"Fernando\", \"Alejandra\"]"; 
txtBuscar.Attributes.Add("data-source", asdf);