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

I want to search a database for a clientName and dynamically show the results while the user is typing so they can select a User. It is now my understanding that this cannot be done without using javascript.

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

So if the user is typing "Al" then reults of clients called "Allan, Alison, Ali..." etc would show in a dropdownlist like display under it. At the moment the user is entering the Clients name into a Textbox.

因此,如果用户正在键入“Al”,那么称为“Allan,Alison,Ali ...”等的客户的结果将显示在其下方的显示下拉列表中。用户正在将客户端名称输入文本框。

I know that creating the DropDownList should be done something like this:

我知道创建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() just checks that the client exists within the database. But I don't know how to dynamically interact with the database to return the results as the user is typing.

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

Any Help will be appreciated, Thank you in advance.

任何帮助将不胜感激,谢谢你提前。

4 个解决方案

#1

You can do it without JS, hang event on text change on TextBox (OnTextChanged), and in there update DDL ( dont forget to set AutoPostBack=true ). But it can easily make user wait ( "freeze page" ), or even rollback what he wrote if you are using Ajax.NET

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

I strongly recommend using JS rather then this ( use JS and WCF/ashx/regular WS, any of these will do ) due to performance gain and much better possibilities of customization. ASP anyway generates a load of JS for "ASP controls".

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

This can be applied for example http://www.codeproject.com/KB/aspnet/Cross_Domain_Call.aspx

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

#2

You'll have to hook into the keyup event on the text box and fire an XmlHttpRequest from that event - if you're using jQuery it's pretty simple:

你必须挂钩文本框中的keyup事件并从该事件激发一个XmlHttpRequest - 如果你使用jQuery它很简单:

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

Alternatively, as Dennis says, just use the auto-complete plugin - it's very simple and works well.

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

#3

As for the client side try jquery and jqueryui's autocomplete, it's just a suggestion, jquery has a nice ajax call and it's really simple to use, and for the jqueryui autocomplete, you just pass it keywords and it will create a list right under the input box.

至于客户端尝试jquery和jqueryui的自动完成,它只是一个建议,jquery有一个很好的ajax调用,它真的很简单,对于jqueryui自动完成,你只需传递它的关键字,它将在输入下创建一个列表框。

http://jquery.com/

http://jqueryui.com/

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

#4

Here's some code that might get you going.

这里有一些代码可能会让你前进。

It uses the jquery Javascript library. It assumes you're getting the full HTML of the results list that you want to display to the user. You'll need more Javascript to dynamically show/hide the box that contains the list. You'll also need a server-side script that gets a collection of search results based on some search text. That script should be located at the URL defined in the #searchPartialUrl tag (which can be hidden). The search text should be in an input called #searchText.

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

I like this method because you can maintain your JS code in a separate file and reuse it. Your server just needs to create HTML views that have all the async target information in regular HTML tags.

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

I also implemented a delay between checking key-events so that you're not constantly sending requests to your server. (I got this method from another answer on *, but I can't seem to find it now. I'll give credit when I do.)

我还在检查键事件之间实现了延迟,这样您就不会经常向服务器发送请求。 (我从*上的另一个答案得到了这个方法,但我现在似乎无法找到它。当我这样做时,我会给予赞扬。)

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

Update:

You said you're using C#. If you're using MVC, you'll need an action in your controller to be a target for your async request. Here's an example:

你说你在使用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);
}

#1