Javascript使用jQuery UI自动完成电子邮件的域名 [英] Javascript Autocomplete email's domain using jQuery UI
问题描述
我需要帮助,我坚持尝试使以下案例场景工作:
你有电子邮件输入字段,你键入:foo @ y - 它应该弹出自动完成框,提供yahoo.com(用于例)。
如果你采纳这个建议,最终价值应该变成:foo@yahoo.com
I need help, I am stuck with trying to make the following case scenario work: You have email input field, you type: foo@y - it should pop up autocomplete box, offering yahoo.com (for example). If you take this suggestion, the end value should become: foo@yahoo.com
我已经写了这个代码(修改了另一个jquery UI示例):
I have wrote this code (modified off another jquery UI sample):
$( "#tags" )
// 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({
minLength: 3,
source: function( request, response ) {
var mail_regex = /^([\w.]+)@([\w.]+)$/;
var match = mail_regex.exec(request.term);
if (match)
var matcher = new RegExp( "^" + match[2], "i" );
response( $.grep( availableTags, function( item ){
return matcher.test( item );
}) );
},
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;
}
});
完整的互动样本:
http://jsfiddle.net/rRF2s/3/
但是,它用yahoo.com替换foo @ - 我不能为我的生活找出如何覆盖这种行为...
However, it REPLACES the foo@ with just yahoo.com - I can not for the life of me figure out how to override this behaviour...
任何Javascript / jQuery大师 - 帮助请!如何实现这一目标?
我试过:返回匹配[1] + matcher.test(item),但这不起作用。
Any Javascript/jQuery masters - help please! how to accomplish this goal? I tried doing: return match[1]+matcher.test( item ), but that does not work.
推荐答案
select
函数正在使用 this.value =
分配结果值。然而,它正在完全替换输入值,而不是使用下拉值附加它。
The select
function is assigning the resultant value with this.value =
. However it is replacing the input value completely rather than appending it with the drop down value.
如果没有进行大量测试,简化函数似乎按要求工作:
Without a great deal of testing the following, simplified function seems to work as required:
select: function( event, ui ) {
this.value = this.value.substring(0, this.value.indexOf('@') + 1) + ui.item.value;
return false;
}
这是已输入值的第一部分,例如 foo @
输入 foo @ ya
然后从下拉列表中添加所选项目的值。
This is taking the first part of the already entered value, for example foo@
for the input foo@ya
and then adding on the value of the selected item from the drop down.
当有人输入 @
符号(对我来说似乎更直观)时,您可能想要触发下拉菜单,如果是这样的话,那么这个函数可能还需要修改才能正确提取用户输入的值。
You may want to trigger the dropdown when someone enters the @
symbol (seems more intuitive to me) and if so, this function may also need modifying to correctly extract the user entered value.
这篇关于Javascript使用jQuery UI自动完成电子邮件的域名的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!