使用 jquery 和 javascript 的 Hashtag 客户端实现

Question

#input {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

<div id="input" placeholder="testing" contenteditable>listening music #music</div>

我正在实施主题标签功能（例如：- #music、#dance）。

如果用户输入“#”字符，我想点击搜索 Api。

例如： 用户更新状态“听音乐#music #dance let's rock”

这里“听音乐，让我们摇滚”是普通文本，“#music”、“#dance”是标签。

每当用户在“听音乐”后输入“#m”时，我需要点击“/search?q=m”之类的 api

var searchData = ["music", "mango", "marks", "moon"]

用户可以选择其中一项建议，并且空格会自动出现在标签之后。

每当用户在“#music”之后输入“#d”时，我需要像“/search?q=d”一样点击api

var searchData = ["dance", "danger", "dad"]

用户可以选择其中一项建议，并且空格会自动出现在标签之后。

“let's rock”是普通文本。

区分“hashtag”的颜色并仅在用户输入“#”时进行搜索

Answer 1

我认为这对你有用

var inputData = "listening music #music #dance let's rock";
var arrayData = inputData.split(" ");

arrayData.forEach(function(entry) {
     if(entry.startsWith(("#music") || ("#etc"))){
     // hit your api
     }
});

Answer 2

您可以将keyup 事件绑定到您的输入以检查主题标签的起始词。找到匹配项后，您调用 AJAX。像这样：

var ajax;

$('#input').keyup(function() {

    var tags = $(this).val().split(' ');
    var lastTag = tags.pop();

    if (/#\S+\b/.test(lastTag)) {
        // abort previous ajax if still running
        if (ajax && ajax.abort && ajax.readyState !== 4)
            ajax.abort();

        // hit your search api
        ajax = $.getJson('/search', { q: lastTag })
               .done(function (data) {
                   // manage your response data here
                   // show suggestions and handle picking one
               });
    }
});

编辑：完全重做逻辑，更简单，更紧凑