use multiple triggers in jQuery autocomplete using mutiple datasets

问题

I am trying to implement twitter/facebook like auto-complete on a textarea. Now Till now i have implemented it for single trigger "@". But I want it to work for 2 triggers "@" and "#". Both will have different data sets.

Here is for the single dataset. This one works perfectly.

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <textarea class="searchBox" cols="20" rows="10"></textarea>
</body>
</html>

var triggered = false; // By default trigger is off
var trigger = "@"; // Defining the trigger

var data = [
    {
        label: "abc",
        value: "abc@live.com"
    },
    {
        label: "def",
        value: "deg@altman.com"
    }, 
    {
        label: "ghf",
        value: "sds@lane.com"
    }
];

$(".searchBox").autocomplete({
    minLength: 0,
    source: data,
    search: function () {
        if (!triggered) {
            return false;
        }
    },
    select: function (event, ui){ 
        var text = this.value;
        var pos = text.lastIndexOf(trigger);
        this.value = text.substring(0, pos) + ui.item.value;
        triggered = false;
        return false;
    },
    focus: function () {
        return false;
    }
}).data( "ui-autocomplete" )._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + "<b>" + item.label + "</b>  " + item.value + "</a>")
        .appendTo(ul);
};

$('.searchBox').keyup(function (e) {

    if (e.keyCode == 38 || e.keyCode == 40) {
        return;
    }

    var text = this.value;
    var len = text.length;
    var last;
    var query;
    var index;

    if (triggered) {
        index = text.lastIndexOf(trigger);
        query = text.substring(index + trigger.length);
        $(this).autocomplete("search",query);
    } else if (len >= trigger.length) {
        last = text.substring(len - trigger.length);
        triggered = (last === trigger);
    }
});

here is the fiddle : http://jsbin.com/qakefini/7/edit

Now what i tried for 2 triggers :

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <textarea class="searchBox" cols="20" rows="10"></textarea>
</body>
</html>

    var triggered = false; 
    var trigger1 = "@"; 

    var trigger2 = "#"; // Defining the trigger

    var trigger = "@";

    var data1 = [
    {
        label: "abc",
        value: "abc@live.com"
    },
    {
        label: "def",
        value: "deg@altman.com"
    }, 
    {
        label: "ghf",
        value: "sds@lane.com"
    }
];

    var data2 = [
      {
        tag: "what"
      },
      {
        tag: "hello"
      },
      {
        tag: "there"
      }
    ];

    var data = jQuery.extend(true, {}, data1);

    $(".searchBox").autocomplete({
        minLength: 0,
        source: data,
        search: function () {
            if (!triggered) {
                return false;
            }
        },
        select: function (event, ui){ 
            var text = this.value;
            var pos = text.lastIndexOf(trigger);
            this.value = text.substring(0, pos) + ui.item.value;
            triggered = false;
            return false;
        },
        focus: function () {
            return false;
        }
    }).data( "ui-autocomplete" )._renderItem = function (ul, item) {
        return $("<li>")
            .append("<a>" + "<b>" + item.label + "</b>" + item.value + "</a>")
            .appendTo(ul);
    };


    $(".searchBox").keypress(function (e) {

        if (e.charCode != 64 && e.charCode != 35) {
              return;
        }

        if (e.charCode == 64) {
          trigger = trigger1;
          data = jQuery.extend(true, {}, data1);
        }
       else if (e.charCode == 35 ){
           trigger = trigger2;
           data = jQuery.extend(true, {}, data2);
         }
    });


    $(".searchBox").autocomplete({
        minLength: 0,
        source: data,
        search: function () {
            if (!triggered) {
                return false;
            }
        },
        select: function (event, ui){ 
            var text = this.value;
            var pos = text.lastIndexOf(trigger);
            this.value = text.substring(0, pos) + ui.item.value;
            triggered = false;
            return false;
        },
        focus: function () {
            return false;
        }
    }).data( "ui-autocomplete" )._renderItem = function (ul, item) {
        return $("<li>")
            .append("<a>" + "<b>" + item.label + "</b>  " + item.value + "</a>")
            .appendTo(ul);
    };

    $('.searchBox').keyup(function (e) {

        if (e.keyCode == 38 || e.keyCode == 40) {
            return;
        }

        var text = this.value;
        var len = text.length;
        var last;
        var query;
        var index;

        if (triggered) {
            index = text.lastIndexOf(trigger);
            query = text.substring(index + trigger.length);
            $(this).autocomplete("search",query);
        } else if (len >= trigger.length) {
            last = text.substring(len - trigger.length);
            triggered = (last === trigger);
        }
    });

And here is the fiddle: http://jsbin.com/qakefini/22/edit

It is not responding to the search queries. Where it is going wrong ? Please help. Thanks. regards.

回答1:

In your second example, you have two arrays data1 and data2, yet you're telling the .autocomplete() that the data source is data (the line reads: source: data) - which is undefined.

来源：https://stackoverflow.com/questions/22606291/use-multiple-triggers-in-jquery-autocomplete-using-mutiple-datasets

标签

javascript

jquery

jquery-ui

jquery-plugins

jquery-autocomplete