Bootstrap typeahead自动补全插件的坑

##Bootstrap typeahead 插件的坑

typeahead 自动补全插件,

还是先简单记录一下,如何使用吧:

<div class="form-group">    
    <label class="col-sm-3 control-label is-required">医生:</label>
    <div class="col-sm-8">
        <input hidden id="hiddenDoctor" name="doctorId">
        <input id="doctorName" class="form-control" type="text" required>
    </div>
</div>
$.get(ctx + "treatment/log/doctor/auto/list", function(data){
            $("#doctorName").typeahead({
                source: data.value,
                updater: function (item) {
                    $("#hiddenDoctor").val(item.id)
                    return item.name;
                }
            });
        },'json');

这样就实现了一个自动补全。

typeahead 的做法好像是页面加载后就调用接口,然后再根据输入的关键字进行过滤

如果数据量很大,我觉得这种方式不可取。

我使用Bootstrap typeahead遇到的坑

1.自动补全的返回值字段必须叫name

image-20220414113435041

所以如果你想对某个字段进行自动补全,后端返回数据时,必须将这个字段命名为name。

2.name字段不能含有null

第一个条件是字段必须叫name,第二个条件就是name字段不能是null。返回的列表数据,只要有一个name的字段为null,自动补全就用不了

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

为了我的架构师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值