Question

I have played with:

https://github.com/experteer/autocompleteTrigger/

as following:

(function ($, window, document, undefined) {
$.widget("ui.autocompleteTrigger", {

    //Options to be used as defaults
    options: {
        triggerStart: "%{",
        triggerEnd: "}"
    },


    _create: function () {
        this.triggered = false;
        this.triggered2 = false;
        this.element.autocomplete($.extend({

            search: function () {
                /**
                * @description only make a request and suggest items if acTrigger.triggered is true
                */
                var acTrigger = $(this).data("autocompleteTrigger");
                if (acTrigger.triggered == true || acTrigger.triggered2 == true) {
                    return true;
                } else {
                    return false;
                }
             },
            select: function (event, ui) {
                /**
                * @description if a item is selected, insert the value between triggerStart and triggerEnd
                */
                var acTrigger = $(this).data("autocompleteTrigger");
                var text = this.value;
                var trigger = acTrigger.options.triggerStart;
                var trigger2 = acTrigger.options.triggerStart2;
                var cursorPosition = acTrigger.getCursorPosition();
                var lastTrigger1Position = text.substring(0, cursorPosition).lastIndexOf(trigger);
                var lastTrigger2Position = text.substring(0, cursorPosition).lastIndexOf(trigger2);
                var lastTriggerPosition;
                if (lastTrigger1Position > lastTrigger2Position) {
                    lastTriggerPosition = lastTrigger1Position;
                } else {
                    lastTriggerPosition = lastTrigger2Position;
                }

                var firstTextPart = text.substring(0, lastTriggerPosition + trigger.length) + ui.item.value +
                    acTrigger.options.triggerEnd;
                this.value = firstTextPart + text.substring(cursorPosition, text.length);

                acTrigger.triggered = false;
                acTrigger.triggered2 = false;

                // set cursor position after the autocompleted text
                this.selectionStart = firstTextPart.length;
                this.selectionEnd = firstTextPart.length;

                return false;
            },
            focus: function () {
                /**
                * @description prevent to replace the hole text, if a item is hovered
                */

                return false;
            },
            minLength: 0
        }, this.options))

    .bind("keyup", function (event) {
        /**
        * @description Bind to keyup-events to detect text changes.
        * If the trigger is found before the cursor, autocomplete will be called
        */
        var acTrigger = $(this).data("autocompleteTrigger");

        if (event.keyCode != $.ui.keyCode.UP && event.keyCode != $.ui.keyCode.DOWN) {
            var text = this.value;
            var textLength = text.length;
            var cursorPosition = acTrigger.getCursorPosition();
            var lastString;
            var query;
            var lastTriggerPosition;
            var lastTriggerPosition2;
            var trigger = acTrigger.options.triggerStart;
            var trigger2 = acTrigger.options.triggerStart2;

            if (acTrigger.triggered && text != "") {
                // call autocomplete with the string after the trigger
                // Example: triggerStart = @, string is '@foo' -> query string is 'foo'
                $(this).autocomplete("option", "source", '/UITests/LookupFirst');
                lastTriggerPosition = text.substring(0, cursorPosition).lastIndexOf(trigger);
                query = text.substring(lastTriggerPosition + trigger.length, cursorPosition);
                $(this).autocomplete("search", query);


            }
            if (acTrigger.triggered2 && text != "") {
                // call autocomplete with the string after the trigger
                // Example: triggerStart = @, string is '@foo' -> query string is 'foo'
                $(this).autocomplete("option", "source", '/UITests/LookupSec');
                lastTriggerPosition2 = text.substring(0, cursorPosition).lastIndexOf(trigger2);
                query = text.substring(lastTriggerPosition2 + trigger2.length, cursorPosition);
                $(this).autocomplete("search", query);
            }
            else if (textLength >= trigger.length) {
                // set trigged to true, if the string before the cursor is triggerStart
                lastString = text.substring(cursorPosition - trigger.length, cursorPosition);
                acTrigger.triggered = (lastString === trigger);
                acTrigger.triggered2 = (lastString === trigger2);
            }
        }
    });
    },

    /**
    * @description Destroy an instantiated plugin and clean up modifications the widget has made to the DOM
    */
    destroy: function () {

        // this.element.removeStuff();
        // For UI 1.8, destroy must be invoked from the
        // base widget
        $.Widget.prototype.destroy.call(this);
        // For UI 1.9, define _destroy instead and don't
        // worry about
        // calling the base widget
    },



    /**
    * @description calculates the the current cursor position in the bound textfield, area,...
    * @returns {int}  the position of the cursor.
    */
    getCursorPosition: function () {
        var elem = this.element[0];
        var position = 0;

        // dom 3
        if (elem.selectionStart >= 0) {
            position = elem.selectionStart;
            // IE
        } else if (elem.ownerDocument.selection) {
            var r = elem.ownerDocument.selection.createRange();
            if (!r) return data;
            var tr = elem.createTextRange(), ctr = tr.duplicate();

            tr.moveToBookmark(r.getBookmark());
            ctr.setEndPoint('EndToStart', tr);
            position = ctr.text.length;
        }

        return position;
    }

});
})(jQuery, window, document);

and in the View:

    $('input,textarea').autocompleteTrigger({
    triggerStart: '#',
    triggerEnd: '',
    triggerStart2: '@@',
    sourceOption1: '/UITests/LookupFirst',
    sourceOption2: '/UITests/LookupSec'

});

Controller Action Method(LookupSec is identical) is:

 public ActionResult LookupFirst(string q)
    {
        var list = new List<string>()
                                {
                                    "Asp",
                                    "BASIC",
                                    "COBOL",
                                    "ColdFusion",
                                    "Erlang",
                                    "Fortran",
                                    "Groovy",
                                    "Java",
                                    "JavaScript",
                                    "Lisp",
                                    "Perl",
                                    "PHP",
                                    "Python",
                                    "Ruby",
                                    "Scala",
                                    "Scheme"
                                };
        IEnumerable<string> data;
        if (q != null)
        {

            data = list.Where(x => x.StartsWith(q));
        }
        else
            data = list;
        return Json(data, JsonRequestBehavior.AllowGet);

    }

Now it supports two triggers @ and # and two datasources for each one…

Problem is the searching doesnt work anymore, everything works as expected “Almost” but when i type something like “@as” it should filter the result but it doesnt!

any idea why this is not working ?

Answer 1

You seem to be using the LookupSec action to filter with the @ character but in your question you have only shown the LookupFirst action which is associated with the # filter character. I have tested your code and it worked for # and not for @ because LookupSec doesn’t exist.

Once I have defined the LookupSec controller action it worked for both. Just be careful as right now you have hardcoded those action names in the widget itself so the sourceOption1 and sourceOption2 parameters will be completely ignored.

The query string parameter used by jquery autocomplete is called term, not q so fix your controller action as right now it isn’t filtering anything:

public ActionResult LookupFirst(string term)
{
    ...
}