前端联想下拉框的实现

最新推荐文章于 2022-06-22 13:56:18 发布

__dazhi

最新推荐文章于 2022-06-22 13:56:18 发布

阅读量5.6k

点赞数

分类专栏： Web开发文章标签： c# javascript typeahead

本文链接：https://blog.youkuaiyun.com/u014291956/article/details/52072900

版权

Web开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何利用JavaScript开源框架Typeahead实现在用户输入字符时的前端联想下拉提示功能，增强了用户界面的友好性。实现过程中，需要引入特定的JS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当用户输入字符时，前端可自动联想出用户输入的字符，下拉框可以增加界面的友好性，这种提示功能可通过开源框架typeahead来实现。

首先该功能需要包含以下JS文件：

<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/bloodhound.js" type="text/javascript"></script>
<script src="../../Scripts/typeahead.bundle.js" type="text/javascript"></script>
<script src="../../Scripts/typeahead.jquery.js" type="text/javascript"></script>

假设前端的下拉框html代码如下:

<h2>Suggestion</h2>
 <div id="container">
<input class="typeahead" type="text" size="400" placeholder="suggestion">
</div>

JS初始化代码如下:

<script>
var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.nonword('value'),
  queryTokenizer: Bloodhound.tokenizers.nonword,
  limit: 10,//最多显示10条数据
  remote: {
    url:'/home/suggest?keyword=%QUERY',//查询的URL，%QUERY为通用符，用于提交后台参数，当需要增加新的参数时就需要修改这里
    wildcard:'%QUERY'
  }
});

bestPictures.initialize();

$('#container .typeahead').typeahead( {
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'best-pictures',
  displayKey: function(item) {
    return item;//返回JSON数组中的每个元素用于显示
  },
  limit:10,
  source: bestPictures.ttAdapter(),
});
</script>

如需增加新的参数可修改remote配置，如：

remote: {
                                    url:'/home/json/suggestion?key=%QUERY&team=%TEAM',
replace:function(url,query) {
       var team = $("# team").val();
      return url.replace("%QUERY",query).replace('%TEAM',team);
}

后端/home/suggestion对应的Action如下：

public ActionResult Suggest()
{
     string query = this.Request.QueryString["keyword"];
       string[] s = { "hello","test"};
       return Json(s, JsonRequestBehavior.AllowGet);
}