在 asp.net Webforms 中引导 Typeahead答案

【问题标题】：Bootstrap Typeahead in asp.net Webforms在 asp.net Webforms 中引导 Typeahead
【发布时间】：2013-06-11 17:28:50
【问题描述】：

我正在寻找如何使用 asp.net Webforms 应用程序实现 Bootstrap Typeahead 的好例子。

应用程序已经在使用 Bootstrap 主题和各种插件。现在我希望用户能够在输入至少三个字母的情况下搜索数据集。一旦用户输入三个字母，脚本将被触发，开始通过网络方法搜索与输入的单词匹配的值，然后将结果传递给用户。

从我目前在网上看到的例子中，我有这个：

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

【问题讨论】：

标签： c# jquery asp.net twitter-bootstrap bootstrap-typeahead

【解决方案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);

    }

【讨论】：

【解决方案2】：

你可以试试这个：

文本框：

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

数据项 = n 项列表

后面的代码：

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

【讨论】：