如果選項值不匹配，則會清除文本框自動完成功能

Question

我這里有一個自動完成功能。 我需要的是，如果在文本框中寫入的值在選項值上不匹配，請清除文本框。 這就是我現在得到的http://jsfiddle.net/qv94t/

選項中甚至不允許該值的文本框。

這是我的代碼

<form id="register_form" name="register_form">
<input list="language" id="none">
<datalist id="language" name="options">
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="kansas">kansas</option
<option value="California">California</option>
</datalist>
</form>

<script>
var validOptions = $("form#register_form input[name='options']").val();
previousValue = "";

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

提前致謝！

Answer 1

我認為這是您要尋找的：

http://jsfiddle.net/juvian/qv94t/3/

您的validOptions未定義，因此無法正常工作。

var validOptions =[];
$("#language option").each(function(){
    validOptions.push($(this).val())      
});

希望能幫助到你！

Answer 2

擺脫這段代碼

if (!isValid) {
    this.value = previousValue
} else {
    previousValue = this.value;
}

這是引起麻煩的人

演示小提琴

Answer 3

只需刪除this.value = previousValue

這是更新的提琴， http://jsfiddle.net/qv94t/2/

var validOptions = $("form#register_form input[name='options']").val();
previousValue = "";

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

    if (!isValid) {
        //this.value = previousValue
    } else {
        previousValue = this.value;
    }
});

希望這可以幫助..！ ：D