4

我正在使用来自jQuery UI 自动完成的http://jsfiddle.net/dhoerster/BXYpt/以值作为基础。这正是我需要的，除了我需要能够有 OR 条件。我创建了一个小提琴作为演示：

http://jsfiddle.net/B8bWX/1/

我的问题是：演示项目是汽车、电话和带电话的汽车。有没有办法让自动完成处理三种情况：字符串包含大小写（默认），然后是 ANDed 大小写，最后是 OR 大小写？因此，如果我输入“车载电话”，它将导致：

1) 第一种情况 - 0 结果为“车载电话”不是任何标签的子字符串。

2) 第二种情况 - 1 个结果，因为“汽车”和“电话”出现在“带电话的汽车”中。这将添加到前面 0 结果下方的列表中。

3) 第三种情况 - 因为标签“汽车”和“电话”至少包含一个搜索项，所以显示了另外 2 个结果。这些结果显示在第 1 阶段和第 2 阶段的先前结果下方，因此现在应该呈现下面的选择框：

带电话的汽车

车

电话（汽车和电话订单真的无关紧要，因为它们都同样正确）

这是有问题的javascript：

$(document).ready(function() {
$( "#topics" ).autocomplete({
    minLength: 1,
    source: topics,
    focus: function( event, ui ) {
        $( "#topics" ).val( ui.item.label );
        return false;
    },
    select: function( event, ui ) {
        $( "#topics" ).val( ui.item.label );
        $("#topicID").val(ui.item.id);
        $( "#results").text($("#topicID").val());    
        return false;
    }
 })

});

那么是否有可能按顺序执行：

1) string.contains (默认)

2) 字符串拆分 --> AND 条件

3) 字符串拆分 --> OR 条件（不优先按包含的术语数排序）

4

1 回答 1

2

我们需要做的是对数据进行我们自己的搜索以获取“AND”和“OR”结果。我的第一个想法是使用自动选择的事件来做到这一点response，并将结果添加到库本身收集的结果中。但是，在编写它时，我意识到无论如何我都必须进行正常搜索，以防止结果出现两次。相反，我将为source属性指定一个函数并自己进行所有排序。

（使用较早的方法，我还遇到了一个 jquery-ui 错误（新消息显示找到了多少结果），它没有提出较新的方法。）

好吧，从这里开始很简单，所以让我展示一下代码：

var topics = [
    {
    value: "carphone",
    label: "Car With Phone",
    id: "1"},
{
    value: "car",
    label: "Car",
    id: "2"},
{
    value: "phone",
    label: "Phone",
    id: "3"}
];

$(document).ready(function() {
    $("#topics").autocomplete({
        minLength: 1,
        focus: function(event, ui) {
            $("#topics").val(ui.item.label);
            return false;
        },
        select: function(event, ui) {
            $("#topics").val(ui.item.label);
            $("#topicID").val(ui.item.id);
            $("#results").text($("#topicID").val());
            return false;
        },
        source: function(request, response) {
            var fullResults = [];
            var andResults = [];
            var orResults = [];
            var fullNeedle = request.term;
            var needles = $.grep(fullNeedle.split(" "), function(element) {
                return element !== '';
            });

            $.each(topics, function(key, topic) {
                var found = 0;
                $.each(needles, function(needleKey, needle) {
                    if (topic.label.toLowerCase().indexOf(needle.toLowerCase()) != -1) {
                        found++;
                    }
                });

                if (topic.label.toLowerCase().indexOf(fullNeedle.toLowerCase()) != -1) {
                    fullResults.push(topic);
                }
                else if (found == needles.length) {
                    andResults.push(topic);
                }
                else if (found > 0) {
                    orResults.push(topic);
                }
            });

            $.merge(fullResults, andResults);
            $.merge(fullResults, orResults);
            response(fullResults);
        }
    });
});

稍微解释一下：我们不再将我们的主题作为来源提供给图书馆，而是在我们自己搜索时为自己保留来源。我们使用三个数组来执行此操作，每个数组将包含三种类型的结果之一，因此我们可以保持顺序正确。最后，我们在完成填充后合并这三个数组。

于 2012-11-08T20:51:57.310 回答