Question

我正在尝试在textarea上实现类似auto-complete的twitter / facebook。现在直到现在我已经实现了单触发器＆＃34; @＆＃34;。但我希望它适用于2个触发器＆＃34; @＆＃34;和＆＃34;＃＆＃34;。两者都有不同的数据集。

这是单个数据集。这个很好用。

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>

JS

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

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

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

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>

JS

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

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

它没有响应搜索查询。哪里出错了？请帮忙。谢谢。问候。

Answer 1

在第二个示例中，您有两个数组data1和data2，但您告诉.autocomplete()数据源为data（该行显示为： source: data） - 未定义。

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

1 个答案: