Javascript 不可编辑jQuery自动完成

我们正在尝试实现不可编辑的jQuery自动完成。例如，当用户从“自动完成”中选择值时，他们无法修改该值。但当他们按backspace键时，旧值将被删除，并且他们可以再次从自动完成中选择新值。 我们知道这方面有很多插件，但我们不想使用任何插件

这是我们的JSFIDLE，用于正常自动完成

下面是具有此功能的插件

我们的代码

$(document).ready(function () {
    var aTags = ["ask", "always", "all", "alright", "one", "foo",
        "blackberry", "tweet", "force9", "westerners", "sport"
    ];

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

HTML:

更新：尝试捕获退格，然后将字段设置为空。如果要在选择时将字段设置为只读，可以在“自动完成”的“选择”中执行此操作

$document.readyfunction{ var aTags=[问，总是，所有，好的，一，foo， 黑莓、推特、force9、西方人、体育 ]; $tags.autocomplete{ 资料来源：aTags， 选择：功能{ $'tags'.propreadonly，true； } }; $'tags'。绑定'keydown'，函数事件{ 如果event.keyCode==8{ 违约事件； $'tags'.propvalue，； $'tags'.propreadonly，false； } }; }; 标签：焦点{ 边框：1px实心0000ff； }

---

试着这样做：

var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];

    $( "#tags" ).autocomplete({
        source: aTags
    });
    $( "#tags" ).blur(function(){
        var tag = $(this).val();
        if(jQuery.inArray(tag,aTags) == -1){
          // the element is not in the array
           $( "#tags" ).val(''); 
        }
    });

---

在模糊函数中，我检查输入值是否在数组中，如果不在数组中，则清除输入字段。

这是解决此问题的方法。这是我的要求。也许它会帮助一些人

HTML:-

<input id="field" type="text" placeholder="test" value="" size="50" />
<div id="output">
</div>

JS:

---

在插件中，他们正在添加可以在退格中删除的li元素，但您正在添加默认情况下不会在单个退格中删除的字符串。您必须编写一个事件来清除它。相同类型的问题，但用户可以在此处修改所选值。例如，如果选择“询问”，则可以对其进行修改。所以它是可编辑的。但是您可以绑定文档的backspace事件来清除该值。这不正确。@RenuThakur我已经对标记进行了编辑，现在才看到。谢谢。很好。但是你能看到这个吗？你不能编辑旧的值。现在我试图将您的代码与这个jsfiddle.net/codemonkeytone/3ew5h6bf/7混淆，这是不正确的。但我也在尝试自定义此值。对不起，您可以修改所选值。@RenuThakur，是的，您可以，但修改后的值不在数组中，它将在模糊函数中被清除。是的，但我的要求是用户不能修改所选值。

<input id="field" type="text" placeholder="test" value="" size="50" />
<div id="output">
</div>

var readOnlyLength = $('#field').val().length;
var tmpFlag=true;
var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];


 $( "#field" ).autocomplete({
    source: aTags,
   select: function( event, ui ) {
   tmpFlag=false;
   }
});
$('#output').text(readOnlyLength);

$('#field').on('keypress, keydown', function(event) {
var $field = $(this);

 if(event.which==8){
    $('#field').val('');
                   tmpFlag=true;

}

console.log(tmpFlag);
if(tmpFlag==false)
if ((event.which != 37 && (event.which != 39))
    && ((this.selectionStart < readOnlyLength)|| (this.selectionStart <= readOnlyLength) ||(this.selectionStart > readOnlyLength) 
    || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
     event.preventDefault();
}


});