Question

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

如果用户输入＆＃39;＃＆＃39;字符我想点击搜索Api。

例如：用户更新状态＆＃34;听音乐#music #dance let＆＃39; rock＆＃34;

这里＆＃34;听音乐，让摇滚＆＃34;是正常的文字＆＃34; #music＆＃34;，＆＃34;＃dance＆＃34;是标签。

每当用户输入＆＃34;＃m＆＃34;在＆＃34;听音乐＆＃34;之后，我需要点击api像＆＃34; /搜索？q = m＆＃34;

var searchData = [＆＃34; music＆＃34;，＆＃34; mango＆＃34;，＆＃34; mark＆＃34;，＆＃34; moon＆＃34;]

用户能够自动选择其中一个建议和空格。

每当用户输入＆＃34;＃d＆＃34;在＆＃34; #music＆＃34;之后，我需要点击api，如＃34; / search？q = d＆＃34;

var searchData = [＆＃34; dance＆＃34;，＆＃34; danger＆＃34;，＆＃34; dad＆＃34;]

用户能够自动选择其中一个建议和空格。

＆＃34;让摇滚＆＃34;是正常的文字。

区分＆＃34;＃标签的颜色＆＃34;并仅在用户输入＆＃34;＃＆＃34;

时进行搜索

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
               });
    }
});

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

使用jquery＆amp; amp; Hashtag客户端实现JavaScript的

2 个答案: