jQuery的自动完成特殊字符触发 [英] jquery autocomplete special char trigger
问题描述
我有以下问题：
我必须与CHAR触发jquery的一个特殊的自动完成@
问题是，如果我开始用文本框@它的工作原理，但如果我输入@后，我写了一些字符它不工作。
它必须是如何工作的：
-i写一些文字是我想从utilizatoriJson添加某人，
-to从utilizatoriJson我必须preSS的@键和自动完成下拉必须apear添加某人，
-after我从下拉式某人或我输入一个完整的标签从下拉菜单中就必须把空间，让我继续我的消息
我怎样才能做到这一点？
code，我写道：
VAR utilizatoriJson =＆LT;％= utilizatoriJson％取代;$（'#textarea_mesaj_colaborare'）。自动完成（{
来源：utilizatoriJson}）.autocomplete（实例）._ renderItem =功能（UL，项目）{
返回$（＆LT;立GT;）
.append（＆所述a取代;+ item.label +＆下; / A＆gt;中）
.appendTo（微升）;
}
$（'#textarea_mesaj_colaborare'）自动完成（禁用）;
$（'＃textarea_mesaj_colaborare'）。KEYUP（函数（）{
如果（$（'＃textarea_mesaj_colaborare）。VAL（）$（'＃textarea_mesaj_colaborare）。VAL（）。长度1] ==='@'）{
。VAR inceput = $（'＃textarea_mesaj_colaborare）VAL（）的长度。 $（'#textarea_mesaj_colaborare'）自动完成（使能）;
}}）;
正如前面提到的，你将需要多个单词在这里接近。
到原始源的链接，上面已经提供。所以，我想展示一下我从你怀疑的理解。
但是，首先让我知道如果你想拥有自动完成等之后，@，与开头的标签'A'应该给的结果只有A开始，而不是那些含有'A'。
因为我想这将是更好的使用，我有code的那部分。
您的HTML
＆LT; DIV CLASS =UI窗口小部件＆GT;
＆LT;标签=标签＆gt;标签：LT; /标签＆gt;
＆LT;输入ID =标签大小=50＆GT;
＆LT; / DIV＆GT;
您的JS
$（函数（）{
//既然你告诉唱片公司开始与'@'
VAR utilizatoriJson = [
{标签：@ActionScript，ID：1}，
{标签：@Java，ID：2}，
{标签：@ C ++，ID：3}，
{标签：@Javascript，ID：'4'}，
{标签：@Python，ID：5}，
{标签：@BASIC，ID：6}，
{标签：@ColdFusion，ID：'7'}，
{标签：@Haskell，ID：'8'}，
{标签：@Lisp，ID：9}，
{标签：@Scala，ID：10}
];
函数split（VAL）{
返回val.split（/ \\ s * /）;
}
功能extractLast（项）{
返回拆分（项）.pop（）;
} $（#tags）
//选择项目时，不要从导航选项卡上的离场
.bind（的keydown，函数（事件）{
如果（event.key code $ === .ui.key code.TAB＆放大器;＆安培;
$（本）.autocomplete（实例）.menu.active）{
。事件preventDefault（）;
}
}）
.autocomplete（{
的minLength：1，
来源：函数（请求，响应）{
//后向委托自动完成，但提取的最后一届
VAR最后字= extractLast（request.term）;
//正则表达式，用于过滤那些与开始标签'@'
VAR匹配=新的RegExp（^+ $ .ui.autocomplete.escapeRegex（最后字），I）;
//获取所有标签
VAR标签= utilizatoriJson.map（函数（项目）{返回item.label;}）;
VAR的结果= $ .grep（标签功能（项目）{
返回matcher.test（项目）;
}）;
响应（$ .ui.autocomplete.filter（
结果，最后字））;
}，
重点：函数（）{
// prevent值插入焦点
返回false;
}，
选择：函数（事件，UI）{
VAR而言=拆分（THIS.VALUE）;
//删除当前输入
terms.pop（）;
//添加所选项目
terms.push（ui.item.value）;
//添加占位符来获得在最后逗号和空格
terms.push（）;
THIS.VALUE = terms.join（）;
返回false;
}
}）;
}）;
工作演示： http://jsfiddle.net/AJmJt/2/
如果你不希望像我说的东西，那么就没有必要对正则表达式匹配，但你需要看看字开头'@'或没有。
code这种行为的工作： http://jsfiddle.net/rPfY8/1/
i have the following problem:
i must make a special autocomplete with jquery triggered by char "@"
the problem is that if i begin the textbox with @ it works but if i enter @ after i write some chars it doesn't work.
how it must work: -i write some text an i want to add someone from "utilizatoriJson", -to add someone from "utilizatoriJson" i must press the @ key and an autocomplete dropdown must apear, -after i select someone from dropdown or i type a full label from dropdown it must put space and let me continue my message
how can i do this ?
code that i wrote :
var utilizatoriJson = <%=utilizatoriJson%>;
$( '#textarea_mesaj_colaborare').autocomplete({
source: utilizatoriJson
}) .autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
}
$( '#textarea_mesaj_colaborare').autocomplete("disable");
$('#textarea_mesaj_colaborare').keyup(function(){
if ($('#textarea_mesaj_colaborare').val()[$('#textarea_mesaj_colaborare').val().length-1]==='@'){
var inceput = $('#textarea_mesaj_colaborare').val().length;
$( '#textarea_mesaj_colaborare').autocomplete("enable");
}
});
As already mentioned, you would require multiple words approach here.
The link to original source has already been provided above. So, I would like show what I understood from your doubt.
But first let me know if you want to have autocompletion like after '@' all label that start with 'a' should give results that only start with 'a' and not those which contain 'a'.
Since I suppose this would be of much better use, I have code for that part.
Your HTML
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" size="50">
</div>
Your JS
$(function() {
//Since you told that labels start with '@'
var utilizatoriJson = [
{'label': "@ActionScript",'id':'1'},
{'label': "@Java",'id':'2'},
{'label': "@C++",'id':'3'},
{'label': "@Javascript",'id':'4'},
{'label': "@Python",'id':'5'},
{'label': "@BASIC",'id':'6'},
{'label': "@ColdFusion",'id':'7'},
{'label': "@Haskell",'id':'8'},
{'label': "@Lisp",'id':'9'},
{'label': "@Scala",'id':'10'}
];
function split( val ) {
return val.split( / \s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#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 ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 1,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
var lastword = extractLast(request.term);
// Regexp for filtering those labels that start with '@'
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( lastword ), "i" );
// Get all labels
var labels = utilizatoriJson.map(function(item){return item.label;});
var results = $.grep(labels ,function( item ){
return matcher.test( item );
});
response( $.ui.autocomplete.filter(
results, lastword ) );
},
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;
}
});
});
Working Demo : http://jsfiddle.net/AJmJt/2/
If you don't want something like I said, then there is no need for RegExp matching, but there you need to see if word starts with '@' or not.
Code for this behaviour working : http://jsfiddle.net/rPfY8/1/
这篇关于jQuery的自动完成特殊字符触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
