领悟旧事--木头云之

asp.net搜索框中汉语、拼音自动补全功能的实现

来源：http://www.xx0594.com/
时间：2017-4-22
作者：浏览人数:1137

网络中，利用jquery的AutoComplete实现自动补全功能的代码一大堆，可我全都看不懂，也没尝试成功过。
经过一周的即若摸索，终于成功了，换来的是两只鼠标手和全身心的放松。
现在总结如下，以备后用。
总的效果图如下：

    一、补全功能
    其他最佳的方法是通过URL，用getJson方式获取数据。但我发现，一是过于复杂，我太笨了，无法掌握；二是不够灵活，必须依赖于数据库。
    我的方法很简单。在后台用C#直接生成一个静态的数据，可以是数组，可以是文本，也可以是Json，然后通过一句简单代码就实现了：

$( "#autocomplete" ).autocomplete({
source:tags//当前数据测试
});

其中tags就是后台生成的数据库。
二、汉语和拼音的同时提示。
    不要看以上只有几行代码，可我花了近6天的时间。
    实现了以上功能后，感觉还是有点自我满足的味道，在别人看来其实还很不够，现在在应用的时候，更多的人只愿意输入"LB"就要出现“李白”的提示。
    怎么办，继续努力。
    首先，要实现这样的功能，必须用Json来构建数据库。因此我们在后台生成了数据，如

{HanZi:"李白",QuanPin:"LiBai",ShouPin:"lb"},......

然后在前台文件中应用AutoComplete来完成。
后台C#代码如下：

protected void WriteAutoComplete()
        {
            Response.Write("<Script>" + sZuoZhePinYin + "</Script>");
        }
//其中sZuoZhePinYin生成的方式根据要求而定，这里就不是提供详细的代码了。
然后在.aspx的前台使用，整个文件代码如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="QuanZuoZhe.aspx.cs" Inherits="WebApplication1.QuanZuoZhe" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div style="text-align: center; background: -webkit-gradient(linear, 81% 20%, 10% 21%, from(#ffd800), to(#00CC99))">
        <asp:TextBox ID="SearchTextBox" runat="server" CssClass="TextBox"></asp:TextBox>
        <asp:Button ID="SearchBtn" runat="server" OnClick="SearchBtn_Click" Text="" CssClass="MySearchBtn"></asp:Button>
    </div>
    <asp:Label ID="ZuoZheShuoMing_Lbl" runat="server" Text="共有作者4678位。"></asp:Label>
    <asp:Label ID="QuanZuoZhe_Lbl" runat="server" Text="此处显示所有作者名字。"></asp:Label>
    <asp:Label ID="AllZuoZhe_Lbl" runat="server" Text="所有作者" Visible="False"></asp:Label>

    <script type="text/javascript" src="/Scripts/LMQAutoComplete/jquery.js"></script>
    <script type="text/javascript" src="/Scripts/LMQAutoComplete/jquery.autocomplete.js"></script>
    <link rel="stylesheet" type="text/css" href="/Scripts/LMQAutoComplete/jquery.autocomplete.css" />
    <%WriteAutoComplete(); %>
    <script>
        $(function () {
            $("#MainContent_SearchTextBox").autocomplete(availableTags, {
                minChars: 1,
                matchCase: false,//不区分大小写。插件程序有Bug，全小写可以，大写不可以。如ABC:用abc不可以匹配；而abc：用ABC/abc/AbC等都可以匹配。
                autoFill: false,
                max: 10,
                formatItem: function (row, i, max, term) {
                    var v = $("#MainContent_SearchTextBox").val();
                    return row.HanZi + " (" + row.QuanPin + ")";
                    if (row.HanZi.indexOf(v) >= 0 || row.QuanPin.indexOf(v) >= 0 || row.ShouPin.indexOf(v) >= 0) {
                        return row.HanZi;//+ " (" + row.QuanPin + ")";
                    }
                    else
                        return false;
                },
                formatMatch: function (row, i, max) {
                    return row.HanZi;//+ " (" + row.QuanPin + ")";
                },
                formatResult: function (row) {
                    return row.HanZi;
                },
                reasultSearch: function (row, v)
                {
                    //自定义：在HanZi、QuanPin或ShouPin中匹配
                    if (row.data.HanZi.indexOf(v) >= 0 || row.data.QuanPin.indexOf(v) >= 0 || row.data.ShouPin.indexOf(v) >= 0) {
                        return row;
                    }
                    else
                        return false;
                }
            });
        });
    </script>
</asp:Content>

代码中引用到的文件，还有整个代码已经打了包，下载地址http://www.xx0594.com/soft/AutoComplete.rar

【关闭窗口】