不可編輯的jQuery自動完成

我們正在嘗試實現不可編輯的jQuery自動完成。例如，當用戶從自動完成中選擇值時，他們無法修改它。但是當他們按退格鍵時，舊值將被刪除，並且他們可以從自動完成中選擇新值。
我們知道這裏有很多插件，但我們不想使用任何插件。不可編輯的jQuery自動完成

這是我們的正常自動完成的jsfiddle。

Jsfiddle

這裏是一個擁有此功能的插件。

plugin

我們的代碼

$(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' />

來源

2015-11-06 Renu Thakur

的插件，他們增加'li'元素它們能夠在退格鍵刪除，但您要添加字符串，其默認情況下不會通過單個backspace。你必須編寫一個事件來清除它。 –

相同類型的問題http://stackoverflow.com/questions/18131080/how-to-set-input-field-from-autocomplete-results-as-non-editable –

更新：嘗試捕退格然後設置現場blank.If要設置字段readonly上選擇，您可以選擇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() { 
 
    \t $('#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

來源

2015-11-06 05:14:50

但是，這裏用戶可以修改選定的值。例如，如果你選擇'問'，那麼你可以修改它。所以它是可編輯的。 –

@RenuThakur嘗試更新的答案。 –

但是，您綁定了文檔的退格事件以清除值。它不正確。 –

-1

嘗試是這樣的：

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

在 blur function

這裏我檢查輸入值w hether在數組中，如果沒有，我清除輸入字段。

來源

2015-11-06 05:46:45 next2u

對不起，但你可以修改選定的值。 –

@RenuThakur，你可以，但修改後的值不在數組中，它在'blur'函數中被清除。 – next2u

是的，但我的要求是用戶無法修改選定的值。 –

以下是解決方案。這是根據我的要求。可能會幫助一個人。

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


});

來源

2015-11-06 07:28:05

不可編輯的jQuery自動完成

回答

相關問題