我看过几个问题,例如 https://stackoverflow.com/a/7222592/2332251
我仍然无法将它与我的代码协调起来。
目前,以下内容非常适合在我开始输入时搜索用户名。
$(function() {
$("#appendedInputButton").autocomplete({
minLength: 2,
source: "searchusers.php"
});
});
searchusers.php 中的函数从数据库中输出用户名。
正如我所说,我无法让其他 @mention 解决方案为我工作。我试过复制其他解决方案并交换我的详细信息,但似乎没有任何效果。
所以...
- 我需要对当前的自动完成脚本做些什么才能使其仅加载 当我最初输入“@”符号时?
- 我真的很希望能够在我的帖子中有多个@mentions
- (可选)当自动完成建议用户名时,当我从列表中选择用户名时,我希望它出现在我的帖子中,@symbol 仍然附加在用户名的前面,例如“你好@john,@符号仍然附加在你的用户名上”
如果您需要更多信息,请发表评论,我会提供更多:)
编辑 我真的不确定让它工作的语法。例如,使用我在上面发布的示例答案,我想出了(但它不起作用):
function split(val) {
return val.split(/@\s*/);
}
function extractLast(term) {
return split(term).pop();
}
function getTags(term, callback) {
$.ajax({
url: "searchusers.php",
data: {
filter: term,
pagesize: 5
},
type: "POST",
success: callback,
jsonp: "jsonp",
dataType: "jsonp"
});
}
$(document).ready(function() {
$("#appendedInputButton")
// 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) {
if (request.term.indexOf("@") >= 0) {
$("#loading").show();
getTags(extractLast(request.term), function(data) {
response($.map(data.tags, function(el) {
return {
value: el.name,
count: el.count
}
}));
$("#loading").hide();
});
}
},
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;
}
}).data("autocomplete")._renderItem = function(ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + " <span class='count'>(" + item.count + ")</span></a>")
.appendTo(ul);
};
});
我在哪里插入 searchusers.php、#appendedInputButton 和其他特定信息?我希望这是有道理的。
最佳答案
我会根据我的评论形成一个答案。
首先让我们回顾一下需求列表:
- 自动完成以
@
符号开头的用户名 - 在用户名前加上
@
符号 - 文本中的多个@mentions
- 编辑文本中任意位置的任何@mention
为了实现最后一个要求,我们需要一些我在 stackoverflow 上找到的神奇函数:
getCaretPosition
- https://stackoverflow.com/a/2897229/2335291setCaretPosition
- https://stackoverflow.com/a/512542/2335291
此外,为了检测文本中某处的用户名,我们需要为用户名定义一些约束。我假设它只能包含字母和数字,并使用 \w+
模式对其进行测试。
您可以在此处找到现场演示 http://jsfiddle.net/AU92X/6/它总是返回 2 行而不过滤只是为了演示行为。在下面的列表中,我从问题中放置了原始的 getTags
函数,因为它对我来说看起来不错。虽然我不知道 searchusers.php
是如何工作的。
function getCaretPosition (elem) {
// Initialize
var iCaretPos = 0;
// IE Support
if (document.selection) {
// Set focus on the element
elem.focus ();
// To get cursor position, get empty selection range
var oSel = document.selection.createRange ();
// Move selection start to 0 position
oSel.moveStart ('character', -elem.value.length);
// The caret position is selection length
iCaretPos = oSel.text.length;
}
// Firefox support
else if (elem.selectionStart || elem.selectionStart == '0')
iCaretPos = elem.selectionStart;
// Return results
return (iCaretPos);
}
function setCaretPosition(elem, caretPos) {
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
function getTags(term, callback) {
$.ajax({
url: "searchusers.php",
data: {
filter: term,
pagesize: 5
},
type: "POST",
success: callback,
jsonp: "jsonp",
dataType: "jsonp"
});
}
$(document).ready(function() {
$("#appendedInputButton").autocomplete({
source: function(request, response) {
var term = request.term;
var pos = getCaretPosition(this.element.get(0));
var substr = term.substring(0, pos);
var lastIndex = substr.lastIndexOf('@');
if (lastIndex >= 0){
var username = substr.substr(lastIndex + 1);
if (username.length && (/^\w+$/g).test(username)){
getTags(username, function(data) {
response($.map(data.tags, function(el) {
return {
value: el.name,
count: el.count
}
}));
});
return;
}
}
response({});
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var pos = getCaretPosition(this);
var substr = this.value.substring(0, pos);
var lastIndex = substr.lastIndexOf('@');
if (lastIndex >= 0){
var prependStr = this.value.substring(0, lastIndex);
this.value = prependStr + '@' + ui.item.value + this.value.substr(pos);
setCaretPosition(this, prependStr.length + ui.item.value.length + 1);
}
return false;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $("<li>")
.data("ui-autocomplete-item", item)
.append("<a>" + item.label + " <span class='count'>(" + item.count + ")</span></a>")
.appendTo(ul);
};
});
关于javascript - 让 jQuery ui 自动完成仅与@mentions 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17027438/