Question

我使用http://jsfiddle.net/dhoerster/BXYpt/中的jQuery UI autocomplete with values作为依据。除了我需要能够具有OR条件之外，这正是我所需要的。我创建了一个小提琴作为演示：

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

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

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

2）第二种情况 - 1结果因为“Car”和“Phone”出现在“Car With Phone”中。这将添加到前面的0结果下面的列表中。

3）第三种情况 - 显示另外2个结果，因为标签“Car”和“Phone”包含至少一个搜索项。这些结果显示在第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）字符串拆分 - ＆gt;和条件

3）字符串拆分 - ＆gt; OR条件（不按照所包含的术语数排序）

Answer 1

我们要做的是自己搜索“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);
        }
    });
});

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

jQueryUI自动完成 - 选择中的AND / OR条件

1 个答案: