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

你必须挂钩文本框中的keyup事件并从该事件激发XmlHttpRequest - 如果你使用的是jQuery，那很简单：

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

或者，正如Dennis所说，只需使用自动完成插件 - 它非常简单并且运行良好。

Answer 2

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

我强烈建议使用JS而不是这个（使用JS和WCF / ashx /常规WS，其中任何一个都可以），因为性能提升和更好的自定义可能性。 ASP无论如何都会为“ASP控件”生成一堆JS。

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

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);
}

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

4 个答案: