jQuery的自动完成与输入验证冻结 [英] jQuery Autocomplete with input validation frozen
本文介绍了jQuery的自动完成与输入验证冻结的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经创建了标签类似于自动完成，以SO。
从我的数据库抓取数据，并将数据作为逗号分隔标签插入到表单字段。
如。 PHP，JS，SO，Laravel
我想它的第4个逗号后停止，所以用户可以输入的4标记的最多。
不幸的是，存在的问题。 4标记之后输入字段冻结。用户不能删除或编辑的标签。
我不知道是什么问题。
＆LT;脚本＆GT;
$（函数（）{
函数split（VAL）{
返回val.split（/ \\ S * /）;
}
功能extractLast（项）{
返回拆分（项）.pop（）;
} $（#themeti） .KEY preSS（函数（五）{
VAR输入= $（本）.VAL（）+ String.fromChar code（e.which）;
如果（input.split（，）长度方式＆gt; 4）{
亦即preventDefault（）;
}
}）
.autocomplete（{
来源：函数（请求，响应）{
$ .getJSON（../../assets/php/themedata.php，{
长期：extractLast（request.term）
}，响应）;
}，
搜索：功能（）{
//定制的minLength
VAR长期= extractLast（THIS.VALUE）;
如果（term.length 2）{
返回false;
}
}，
重点：函数（）{
// prevent值插入焦点
返回false;
}，
选择：函数（事件，UI）{
VAR而言=拆分（THIS.VALUE）;
//删除当前输入
terms.pop（）;
//添加所选项目
terms.push（ui.item.value）;
//添加占位符来获得在最后逗号和空格
terms.push（）;
THIS.VALUE = terms.join（，）;
返回false;
}
}）;}）;
解决方案
这是我落得这样做
$（#themeti）
//选择项目时，不要从导航选项卡上的离场 .bind（的keydown，函数（事件）{
如果（event.key code $ === .ui.key code.TAB＆放大器;＆安培;
$（本）。数据（自动完成）.menu.active）{
。事件preventDefault（）;
}
}）
.autocomplete（{
来源：函数（请求，响应）{
$ .getJSON（../../assets/php/themedata.php，{
长期：extractLast（request.term）
}，响应）;
}，
搜索：功能（）{
//定制的minLength
VAR长期= extractLast（THIS.VALUE）;
如果（term.length 2）{
返回false;
}
}，
重点：函数（）{
// prevent值插入焦点
返回false;
}， 选择：函数（事件，UI）{
VAR而言=拆分（THIS.VALUE）;
如果（terms.length＆下; = 4）{
//删除当前输入
terms.pop（）;
//添加所选项目
terms.push（ui.item.value）;
//添加占位符来获得在最后逗号和空格
terms.push（）;
THIS.VALUE = terms.join（，）;
返回false;
}其他{
VAR最后= terms.pop（）;
$（本）.VAL（this.value.substr（0，this.value.length - last.length - 2））; //将删除输入文本
$（本）.effect（亮点，{}，1000）;
$（本）.addClass（红）;
$（＃警告）HTML（＆LT;跨度风格=颜色：红色;'＆GT;最多达人＆LT; / SPAN＆gt;中）。
返回false;
}
}
I have created a autocomplete with tags similar to SO.
It grabs data from my db and inserts the data as comma delimited tags into a form field.
eg. PHP, JS, SO, Laravel
I wanted it to stop after the 4th comma, so the user can input a max of 4 tags.
Unfortunately there is a problem. The input field freezes after the 4th tag. THe user can't delete or edit the tags.
I don't know what the problem is.
<script>
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#themeti" )
.keypress(function (e) {
var input = $(this).val()+String.fromCharCode(e.which);
if (input.split(',').length > 4) {
e.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "../../assets/php/themedata.php", {
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
解决方案
This is what I ended up doing
$( "#themeti" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "../../assets/php/themedata.php", {
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
if(terms.length <= 4) {
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
} else {
var last = terms.pop();
$(this).val(this.value.substr(0, this.value.length - last.length - 2)); // removes text from input
$(this).effect("highlight", {}, 1000);
$(this).addClass("red");
$("#warnings").html("<span style='color:red;'>Max people reached</span>");
return false;
}
}
这篇关于jQuery的自动完成与输入验证冻结的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
