使用多个数据集在jQuery自动完成中使用多个触发器

本文介绍了使用多个数据集在jQuery自动完成中使用多个触发器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在textarea上实现twitter/facebook之类的自动完成功能.现在，直到现在我已经为单个触发器"@"实现了它.但我希望它可用于2个触发器"@"和#".两者将具有不同的数据集.

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: "[email protected]"
    },
    {
        label: "def",
        value: "[email protected]"
    }, 
    {
        label: "ghf",
        value: "[email protected]"
    }
];

$(".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);
    }
});

这是小提琴: http://jsbin.com/qakefini/7/edit

现在我尝试了2个触发器:

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: "[email protected]"
    },
    {
        label: "def",
        value: "[email protected]"
    }, 
    {
        label: "ghf",
        value: "[email protected]"
    }
];

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

这是小提琴: http://jsbin.com/qakefini/22/edit

它不响应搜索查询.哪里出了问题?请帮忙.谢谢.问候.

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

使用多个

使用多个数据集在jQuery自动完成中使用多个触发器

问题描述

推荐答案