使用 Javascript 和 C# 动态搜索数据库并显示结果

Question

我想在数据库中搜索 clientName 并在用户键入时动态显示结果，以便他们可以选择用户。现在我的理解是，如果不使用 javascript，这是无法做到的。

因此，如果用户键入“Al”，则名为“Allan、Alison、Ali...”的客户端的结果将显示在下拉列表中，如在其下方显示。 目前，用户正在将客户名称输入到文本框中。

我知道创建 DropDownList 应该这样做：

private void InitializeNameDropDown(DataTable dtTable)
{
    string ClientName = Clienttb.Text;
    MySqlDataReader Reader = MySQLQuery(ClientName);
    int nTotalRecords = dtTable.Rows.Count;
    for (int i = 0; i < nTotalRecords; i++)
    {
        NameDropDown.Items.Add(dtTable.Rows[i]["Client"].ToString());
    }
}

MySQLQuery() 只是检查客户端是否存在于数据库中。 但我不知道如何与数据库动态交互以在用户输入时返回结果。

任何帮助将不胜感激，在此先感谢您。

Answer 1

您可以在没有 JS 的情况下执行此操作，在 TextBox (OnTextChanged) 上挂起文本更改事件，并在其中更新 DDL（不要忘记设置 AutoPostBack=true ）。 但它很容易让用户等待（“冻结页面”），如果您使用的是 Ajax.NET，甚至可以回滚他写的内容

我强烈建议使用 JS 而不是这个（使用 JS 和 WCF/ashx/regular WS，这些都可以），因为性能提升和更好的定制可能性。 无论如何，ASP 都会为“ASP 控件”生成大量 JS。

这可以应用例如http://www.codeproject.com/KB/aspnet/Cross_Domain_Call.aspx

Answer 2

您必须在文本框上挂钩 keyup 事件并从该事件中触发 XmlHttpRequest - 如果您使用的是 jQuery，这非常简单：

$('#mytextbox').keyup(function() { $.ajax(blah blah) });

或者，正如 Dennis 所说，只需使用自动完成插件即可 - 它非常简单且效果很好。

Answer 3

至于客户端试试 jquery 和 jqueryui 的自动完成，这只是一个建议，jquery 有一个很好的 ajax 调用而且它使用起来非常简单，对于 jqueryui 自动完成，你只需传递关键字，它就会创建一个列表对在输入框下方。

http://jquery.com/

http://jqueryui.com/

http://api.jquery.com/jQuery.ajax/

Answer 4

这里有一些代码可以帮助你。

它使用 jquery Javascript 库。它假定您正在获取要显示给用户的结果列表的完整 HTML。您将需要更多 Javascript 来动态显示/隐藏包含列表的框。您还需要一个服务器端脚本，该脚本可以根据某些搜索文本获取搜索结果的集合。该脚本应位于 #searchPartialUrl 标记中定义的 URL（可以隐藏）。搜索文本应位于名为 #searchText 的输入中。

我喜欢这种方法，因为您可以将 JS 代码保存在单独的文件中并重复使用。您的服务器只需要创建在常规 HTML 标记中包含所有异步目标信息的 HTML 视图。

我还在检查键事件之间实现了延迟，这样您就不会不断地向服务器发送请求。 （我从 stackoverflow 上的另一个答案中得到了这个方法，但我现在似乎找不到它。我会在我这样做时给予信任。）

// This function is used to delay the async request of search results
// so we're not constantly sending requests.
var mydelay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

var asyncSearchForm = function(onSuccess) {

    var keyupWrapper = function(keyCode) {

        // if this key was an arrow key, then
        // ignore the press
        for (var i = 37; i <= 40; i++)
            if (keyCode == i)
            return;

        // get all the search info from the form
        var searchText = $('#searchText').val();
        var searchPartialUrl = $('#searchPartialUrl').val();

        // make the ajax call
        $.ajax({
            type: "POST",
            url: searchPartialUrl,
            data: {
                searchText: searchText
            },
            dataType: "html",

            // on success, the entire results content should be replaced
            // by the results returned
            success: function(data, textStatus, jqXHR) {
                $('#searchResults').html(data);
                onSuccess();
            },

            // on error, replace the results with an error message
            error: function(jqXHR, textStatus, errorThrown) {
                $('#searchResults').html('<p>An error occurred while getting the search results.</p>');
            }
        });
    };

    onSuccess = (typeof (onSuccess) == 'undefined') ? function() { } : onSuccess;

    // On each key-up event, we'll search for the given input. This event
    // will only get triggered according to the delay given, so it isn't
    // called constantly (which wouldn't be a good idea).
    $('#searchText').keyup(function(e) {

        // delay between each event
        mydelay(function() {

            // call key up
            keyupWrapper(e.keyCode);

        }, 500);
    });
}

更新：

您说您使用的是 C#。如果您使用的是 MVC，则需要控制器中的操作作为异步请求的目标。这是一个例子：

[HttpPost]
public ActionResult GetSearchResults(string searchText)
{
    // Here, you should query your database for results based
    // on the given search text. Then, you can create a view
    // using those results and send it back to the client.
    var model = GetSearchResultsModel(searchText);

    return View(model);
}