이 스 니펫을 사용하여 사용자가 도시 목록에서 선택하고 쉼표로 구분 된 텍스트 영역에 삽입 할 수있게합니다. 그거야.jQuery : 사용자가 텍스트 영역에서 제안하는 자동 완성에서 값을 선택하도록합니다.
이 목표에 도달하고 싶습니다. 사용자가 콤보 상자와 비슷한 도시 이름을 검색하기 위해 도시 이름의 일부를 씁니다. 그러나 옵션 중 하나를 선택하지 않고 필드를 떠날 경우 삽입 된 데이터 지워 져야합니다.
간단히 말해, 사용자가 양식을 제출하기 전에 완전한 도시 이름이 아닌 문자열로 필드를 채우지 못하게하는 유효성 검사를 구현하고 싶습니다.
아이디어가 있으십니까?
감사합니다.
jQuery(function() {
var availableTags = [
"Agliè (TO)",
"Airasca (TO)",
//--- the other cities list ---
];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
jQuery('textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]')
//,input[name=wpv-wpcf-comuni-caldo],input[name=wpv-wpcf-comuni-freddo],input[name=wpv-wpcf-comuni-alta-potenza]
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
if (event.keyCode === jQuery.ui.keyCode.TAB &&
jQuery(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response(jQuery.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function() {
// prevent value inserted on focus
return false;
},
autoFill:true,
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;
}
});
});jQuery(function() {
var availableTags = [
"Agliè (TO)",
"Airasca (TO)",
//--- the other cities list ---
];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
var valoreAttuale = "";
jQuery('textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]').focus(function() { //al primo click nel campo, memorizzo le città attuali
valoreAttuale = jQuery(this).val();
console.log(valoreAttuale);
});
jQuery('textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]')
//,input[name=wpv-wpcf-comuni-caldo],input[name=wpv-wpcf-comuni-freddo],input[name=wpv-wpcf-comuni-alta-potenza]
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
if (event.keyCode === jQuery.ui.keyCode.TAB &&
jQuery(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response(jQuery.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function() {
// prevent value inserted on focus
return false;
},
autoFill:true,
change: function (event, ui)
{
if (!ui.label) { this.value = valoreAttuale; }
},
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(", ");
valoreAttuale = jQuery(this).val();
console.log(valoreAttuale);
return false;
}
});
});