使用bootstrap typeahead插件完成自动补全

项目中需要输入框自动补全,搜索测试没少走弯路,终于成功,记录下来,共同学习,希望大家少进坑.

1.依次引入jQuery、bootstrap、typeahead依赖包。
2.创建容器，指定要实现自动补全的位置
3.使用typeahead函数，给参数赋值

typeaheadjar包的下载地址：https://github.com/bassjobsen/Bootstrap-3-Typeahead/

(使用环境:Bootstrap v4.3.1,Jquery v3.5.1,typeahead v4.0.2,Net:6.0 Razor Page)

<input class="typeahead" data-provide="typeahead" autocomplete="off" />

1.以下代码要放到 @section Scripts{}里

2.Create是代码所在页面,换页面没调通,Search处理

3.input:hidden[name="__RequestVerificationToken 页面中要有form表单才有这个值

4.关键字注意大小写,如datatype写成dataType,autoSelect写成autoselect都会报错

<script type="text/javascript" src="/lib/typeahead/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">
    var item=[{id:"1",name:"err_1"+result.code},{id:"2",name:"err_2"}];
     $(".typeahead").typeahead({
         autoselect:true,
         source:function(query,process){
             $.ajax({
                 type:"post",
                 url:"Create?handler=Search", 
                 headers:{
                     "RequestVerificationToken":$('input:hidden[name="__RequestVerificationToken"]').val()
                 },
                 data:{query},
                 datatype:"json",
                 success:function(result,code) //result返回的数据,code状态"success"
                 {
                     return process(result);
                 },
                 //complete:function(result)
                 //{
                 //    return process(item);
                 //},
                 error:function(result)
                 {
                     alert("error");
                     return process(item);
                 },

             }).done(function(result){
                 //结束后的处理
             });
         },
          autoSelect:true,
     });
</script>

后台返回JosnResult类型值:

List<AppUser> appUsers = await _dbContext.AppUsers.Where(x => x.Name.Contains(query) || x.PhoneNumber.Contains(query)).ToListAsync();
List<UserList> userlist = new();
foreach (AppUser u in appUsers)
{
    userlist.Add(new UserList { Id = u.Id, Name = u.Name + "," + u.PhoneNumber});
}
var result = new JsonResult(userlist);
result.ContentType = "application/json";
return result;