日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

Bootstrap typeahead自動補全插件的坑

作者:為了我的架構師 更新時間: 2022-04-17 編程語言

##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,自動補全就用不了

原文鏈接:https://blog.csdn.net/qq_42682745/article/details/124176905

欄目分類
最近更新