不可编辑的jQuery自动完成

Question

We are trying to implement non-editable jQuery auto-complete. For example when user selects value from auto-complete they not able to modify it. But when they press backspace old value is deleted and again they can select new value from auto-complete.
We know there is lot's of plugin for this, But we don't want to use any plugin.

Here is our jsfiddle for normal auto-complete.

Jsfiddle

Here is the plugin which which has this functionality.

plugin

Our Code

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

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

HTML:

<input type='text' title='Tags' id='tags' />

Answer 1

UPDATED: Try catching backspace then set the field to blank.If you want to set the field readonly on selection,you can do it in select of autocomplete .

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $(document).ready(function () { var aTags = ["ask", "always", "all", "alright", "one", "foo", "blackberry", "tweet", "force9", "westerners", "sport" ]; $("#tags").autocomplete({ source: aTags, select: function () { $('#tags').prop("readonly",true); } }); $('#tags').bind('keydown', function (event) { if (event.keyCode === 8) { event.preventDefault(); $('#tags').prop("value",""); $('#tags').prop("readonly",false); } }); }); </script> <style> #tags:focus { border:1px solid #0000ff; } </style> <input type='text' title='Tags' id='tags' /> 

FIDDLE WITH YOUR ANGULAR SCRIPT

Answer 2

Here is the solution for this. It's as per my requirement. May be it will help some-one.

Working Solution

HTML:-

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

JS:

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();
}


});                      

Answer 3

Try something like this:

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

DEMO

Here in blur function I check the input value whether in the array, if not I clear the input field.