[英]Non editable jQuery auto-complete
我们正在尝试实现不可编辑的jQuery自动完成功能。 例如,当用户从自动完成中选择值时,他们将无法对其进行修改。 但是,当他们按退格键时,旧值将被删除,然后他们又可以从自动完成中选择新值。
我们知道有很多插件可以使用,但是我们不想使用任何插件。
这是正常自动完成的jsfiddle。
这是具有此功能的插件。
我们的守则
$(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' />
更新:尝试捕获退格键,然后将该字段设置为空白。如果要在选择时将字段设置为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 () { $('#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' />
这是解决方案。 根据我的要求。 可能会帮助一个人。
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();
}
});
尝试这样的事情:
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('');
}
});
在blur function
我检查输入值是否在数组中,如果不是,则清除输入字段。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.