如果选项值不匹配,则文本框自动完成清除

时间:2014-02-21 06:04:15

标签: javascript jquery

我这里有一个自动完成功能。我需要的是,如果在文本框中写入的值与选项值不匹配,则清除文本框。这就是我现在所得到的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>

感谢高级!

3 个答案:

答案 0 :(得分:2)

我认为这就是你要找的东西:

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

您的validOptions未定义,因此无法正常工作。

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

希望它有所帮助!

答案 1 :(得分:1)

摆脱这段代码

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

是造成麻烦的那个

Demo Fiddle

答案 2 :(得分:0)

只需删除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