一个事件干扰了Select2插件的ajax检索结果 [英] An event is interfering with Select2 plugin's ajax-retrieved results

问题描述

我使用Igor Vaynberg的Select2 jQuery插件与 Infinite Scroll with Remote Data 选项进行自动完成搜索框为我的网站。 AJAX工作良好，结果显示，但它们是不可选择的 - 变化事件从未被解雇，当你点击一个结果时，什么也没有发生。

I'm using Igor Vaynberg's Select2 jQuery plugin with the Infinite Scroll with Remote Data option to make an autocomplete search box for my website. The AJAX is working great and the results are showing up, but they are unselectable -- the change event is never fired and when you click on a result, nothing happens.

Chrome控制台中也没有显示错误，所以我认为这不是语法错误，而是该插件将其误认为是禁用的选择框。 编辑：为结果列表尝试了一个单独的点击事件，但我现在非常确定这些事件干扰了事件。

There are also no errors showing up in the Chrome console, so I think it's not a syntax error, rather the plugin is mistaking it for a disabled select box. having tried a separate on-click event for the result list which never got fired either, I'm now pretty sure there's something interfering with the events.

这是我目前的代码， $ b

Here's my code currently,

// Search
$("#site-search").select2({
    placeholder: "Search posts",
    minimumInputLength: 3,
    ajax: {
        url: "http://localhost/mysite/search",
        dataType: 'json',
        quietMillis: 500,
        data: function (term, page) {
            return {
                q: term,
                page_limit: 10,
                page: page // page number
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.length; // whether or not there are more results available

            // return the value of more to tell if more results can be loaded
            return {results: data, more: more};
        }
    },
    formatResult: function(post) {
        // return html markup for individual result item
        markup = '<img src="'+post.image+'" style="width:40%;float:left;margin-right:5px">';
        markup += '<p>'+post.title+'</p>';
        markup += '<div class="clearfix"></div>';
        return markup;
    },
    formatSelection: function(post) {
        // This shows up in the select box
        return post.title;
    },
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
}).on('change', function(e) {
    try {
        var slug = e.val.slug;
        window.location.href = "http://localhost/mysite/posts/"+slug;
    } catch(error) {
        console.log('Selected search result is invalid: ');
    }
});

选择框本身只是一个输入，类型为：hidden

The select box itself is just an input with type: hidden

<input type="hidden" class="bigdrop" id="site-search" style="width:100%;height:auto">

推荐答案

您的问题似乎是，您的结果数据不会有一个名为id的属性。 Select2插件需要关于数据的ID字段，如果没有，则会选择不可选择。您可以提供一个id函数来覆盖此行为：

Your problem seems like, your result data doesn't have a property named "id". Select2 plugins wants an id field on data and if it has not, it makes option "unselectable". You may give an id function to override this behavior:

$("#site-search").select2({
   id: function(obj) {
      return obj.slug; // use slug field for id
   },
   ...

这篇关于一个事件干扰了Select2插件的ajax检索结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！