хэштегом реализации на стороне клиента с помощью JQuery & JavaScript

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 давайте рок»

здесь «прослушивания музыки, давайте рок» обычный текст и «#music», «#dance» являются хэштегом.

всякий раз, когда пользователь вводит «#M» после «прослушивания музыки», мне нужно ударить апи как «/ поиск? Д = т»

вар searchData = [ «музыка», «манго», «знаки» , "moon"]

Пользователь, который может выбрать одно из предложений и пространства, будет появляться после хэштега автоматически.

всякий раз, когда пользователь вводит "#d" после "#music", мне нужно попасть апи, как "/ поиск? Д = д"

вар searchData = [ "опасность", "танец", "папа" ]

Пользователь, который может выбрать одно из предложений и пространства, будет автоматически появляться после хэштага.

«давай рок» - это обычный текст.

дифференциации цвета «хэштегом» и поиск только тогда, когда пользователь вводит «#»

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 событие к введенному для проверки на hashtag стартовые слова. Когда совпадение найдено, вы вызываете свой 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 
       }); 
    } 
}); 

EDIT: Полностью переделанный логики, гораздо более простой и компактный