Javascript 过滤用户输入的前两个字符，并从外部数据库中检索以过滤输入开头的任何匹配词

我需要从外部数据库表中的单词匹配开始时过滤的用户输入的前两个字符（而不是单词中的任何位置）加载一个选择列表

我使用Bootstrap4.0作为页面控件和ASP.NET4.6Framework/C#后端代码。我对Javascript不是很熟悉，但如果这是处理这个问题的最佳方法（对大约1800条记录的表查询的性能方面），那么我将这样做

我想要的是一些关于如何最好地处理这个问题的建议或代码示例。我时间不够，这对我来说是一个新领域。我找遍了所有的地方，没有找到任何能给我指明方向的东西

FWIW，这不是学校的项目。

你可以使用。看看Ajax示例。当用户在搜索框中输入2个字符时，需要使用ajax调用获取数据，然后可以远程调用controller方法从DB返回数据。您需要稍微更改formatRepo和formatRepoSelection方法，以更改搜索框中的显示结果

HTML代码：

<select class="js-data-example-ajax"></select>

Javascript代码：

$(".js-example-data-ajax").select2({
    ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, params) {
            // parse the results into the format expected by Select2
            // since we are using custom formatting functions we do not need to
            // alter the remote JSON data, except to indicate that infinite
            // scrolling can be used
            params.page = params.page || 1;

            return {
                results: data.items,
                pagination: {
                    more: (params.page * 30) < data.total_count
                }
            };
        },
        cache: true
    },
    placeholder: 'Search for a repository',
    escapeMarkup: function (markup) {
        return markup;
    }, // let our custom formatter work
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

function formatRepo(repo) {
    if (repo.loading) {
        return repo.text;
    }

    var markup = "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
        "<div class='select2-result-repository__meta'>" +
        "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

    if (repo.description) {
        markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
    }

    markup += "<div class='select2-result-repository__statistics'>" +
        "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
        "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
        "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
        "</div>" +
        "</div></div>";

    return markup;
}

function formatRepoSelection(repo) {
    return repo.full_name || repo.text;
}

$（“.js示例数据ajax”）。选择2({
阿贾克斯：{
url:“https://api.github.com/search/repositories",
数据类型：“json”，
延误：250，
数据：函数（参数）{
返回{
q:params.term，//搜索项
页码：params.page
};
},
processResults：函数（数据、参数）{
//将结果解析为Select2所需的格式
//因为我们使用的是自定义格式函数，所以不需要
//更改远程JSON数据，除非指示无限
//可以使用滚动
params.page=params.page | | 1；
返回{
结果：数据项，
分页：{
更多：（params.page*30）

控制器代码：

public class YourModel{
   public int ID {get; set;}
   public string Value{get; set;
}

public JsonResult repositories(string searchterm){
     List<YourModel> result = //db call using search term
     return Json(result, , JsonRequestBehavior.AllowGet);
}

公共类模型{
公共int ID{get；set；}
公共字符串值{get；set；
}
公共JsonResult存储库（字符串搜索术语）{
List result=//使用搜索词的数据库调用
返回Json（结果，JsonRequestBehavior.AllowGet）；
}

您可以在这里向我们展示一些解决方法。我们不会为您完成所有的工作。对于浏览器，我建议先使用固定数据进行尝试，然后尝试使用异步请求获取数据。后端只接受带有一些文本的get请求并返回json数据。当您陷入困境时，请展示您目前获得的代码（确保您的C#在浏览器中发出请求时工作正常）要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题与堆栈溢出无关，因为这些问题往往会吸引自以为是的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决问题所做的工作。这是一个如何使用typeahead的简单示例。请单击“设置”，然后单击ca查看它所依赖的css和js文件。HMR谢谢，我将按照你的建议使用typeAhead。它看起来应该很适合我们的需要。谢谢你的输入，这对我来说非常有价值。我们将尝试bootstrap 4的typeAhead插件。仍然有一些事情需要解决，但这是一个很好的开始。你会的来吧。如果你需要关于typeAhead的任何帮助，请告诉我。你甚至可以将这两个插件组合在一起。如果你觉得这个答案有用，那么你可以选择作为答案。我正在努力提高我的分数，以便在Stackoverflow中回答更多问题。