Jquery 自动完成 - 只允许自动完成建议

Question

我使用这个 jQuery Autocomplete - 输入字段的框架（输入三个字符后出现建议），我只允许输入自动完成建议。

我的第一个方法是：

var nameSelectedOverSearch = false;
var availablePersons = [];
$(function() {
    $("#anspr").autocomplete({
        source: availablePersons,
        select: function(event, ui) {
            nameSelectedOverSearch = true;
        }
    });
});

用户必须点击自动完成建议，但之后用户仍有可能更改输入。有没有可能只允许自动完成输入？

Answer 1

您可以使用这个很棒的库 https://harvesthq.github.io/chosen/. I did a full exemple with autocomplete and chosen to compare : https://jsfiddle.net/Tintin37/uw52snsq/

我认为它完全符合您的需求。

相关代码：

    $("#tags").autocomplete({
      source: availableTags
    });

    $.each(availableTags,function(i,e){
             $("#choosen").append('<option>'+e+'</option>');   
    });
    $("#choosen").chosen({search_contains: true});

Answer 2

您需要使用函数 "keyup" 这样您就可以验证任何字母并且只允许您列出的选项：

$('#tags').autocomplete({
  autoFocus: true,
  source: availableTags 
  }).keyup(function() {
    var isValid = false;
    for (i in availableTags) {
        if (availableTags[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }
});

Jquery 自动完成 - 只允许自动完成建议

Jquery autocomplete - only allow autocomplete suggestions

jquery

jquery-autocomplete