Recursive tag search for Autocomplete - jQuery plugin

Question

I am using the jQuery autocomplete plugin to search for tags in a textarea.

It's work perfectly, but now I need it search again while user is typing in the text box.

For example, I have:

var tags = [ 
        { label: "#schedules", value: "Monday, Wednesday and Friday from 9:00 p.m. to 6:00 p.m." }, 
        { label: "@address", value: "Some Address, 12345 - Some City" },
    ];

$("#text_box").autocomplete({

        source: function(request, response) {

            var matcher = new RegExp(
                "^" + $.ui.autocomplete.escapeRegex(request.term), "i"
            );

            response($.grep(tags, function(item) {
                return matcher.test(item.label);
            }));

        }

    });

So if the user write:

"Hello, tanks for contact us, where be able #schedules you can find us in @address"

the plugin must search all the coincidences again and suggest them on the bottom the text box every time. And the restultant string in the text box must be:

"Hello, tanks for contact us, where be able Monday, Wednesday and Friday from 9:00 pm to 6:00 pm you can find us in Some Address, 12345 - Some City"

Question: How I can do this? Can the plugin do this, or I need to create my own algorithm?

Answer 1

As I mentioned, with some minor changes to the Demo, you can make a quick substitution menu.

 var tags = [{ label: "@schedules", value: "Monday, Wednesday and Friday from 9:00 pm to 6:00 pm" }, { label: "@address", value: "Some Address, 12345 - Some City" }]; $(function() { function split(val) { return val.split(" "); } function extractLast(term) { return split(term).pop(); } $("#text_box").on("keydown", function(event) { if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function(request, response) { var q = extractLast(request.term); console.log("Term: " + q); if (q.indexOf("@") == 0) { // delegate back to autocomplete, but extract the last term response($.ui.autocomplete.filter(tags, q)); } }, 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; } }); }); 

 #text_box { width: 75%; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <textarea id="text_box"></textarea> 

Update

If you suspect that you will have multiple symbols, you could make use of a switch() statement or a complex if() . Something like:

if(q.indexOf("@") == 0 || q.indexOf("$") == 0 || q.indexOf("#") == 0){
  response($.ui.autocomplete.filter(tags, q));
}

Or:

switch(true){
  case (q.term.indexOf("@") == 0):
  case (q.term.indexOf("$") == 0):
  case (q.term.indexOf("#") == 0):
    response($.ui.autocomplete.filter(tags, q));
    break;
}