Bootstrap typeahead auto-completion plugin pit

##Bootstrap typeahead plugin pit

typeahead auto-completion plugin,

Or simply record how to use it:

<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');

This implements an autocompletion.

The approach of typeahead seems to be to call the interface after the page is loaded, and then filter according to the entered keywords

If the amount of data is large, I don't think this approach is advisable.

The pit I encountered using Bootstrap typeahead

1. The return value field of autocompletion must be calledname

image-20220414113435041

So if you want to autocomplete a field, when the backend returns data, you must name the field name.

2. The name field cannot containnull

The first condition is that the field must be called name, and the second condition is that the name field cannot be null. The returned list data, as long as there is a field of name is null, auto-completion will not work

Guess you like

Origin blog.csdn.net/qq_42682745/article/details/124176905