一个事件干扰了 Select2 插件的 ajax 检索结果

Posted 2023-05-07

【中文标题】一个事件干扰了 Select2 插件的 ajax 检索结果

【英文标题】：An event is interfering with Select2 plugin's ajax-retrieved results

【发布时间】：2012-12-21 00:51:09

【问题描述】：

我正在使用 Igor Vaynberg 的 Select2 jQuery 插件和 Infinite Scroll with Remote Data 选项为我的网站创建一个自动完成搜索框。 AJAX 运行良好，结果显示出来了，但它们是不可选择的 - 永远不会触发更改事件，当您单击结果时，什么也不会发生。

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

这是我目前的代码，

// 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: ');
    
);

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

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

【问题讨论】：

我尝试在更改事件的开头放置一个 console.log，但它从未被触发。

我在本地使用 twitter json api 尝试了您的代码，效果非常好。也许，另一个事件侦听器阻止运行此更改事件侦听器。你能在互联网上展示一个运行 ajax 数据示例的工作示例吗？

@MuratÇorlu 我已经把它暂时放在indiewebseries.com。它是右侧边栏顶部的搜索栏。

@MuratÇorlu 我认为您可能对某处的另一个事件监听器是正确的。我刚刚尝试添加一个单独的 jquery onclick 事件以在单击结果时触发，并且它也没有被触发。知道如何找到干扰事件吗？

【参考方案1】：

您的问题似乎是，您的结果数据没有名为“id”的属性。 Select2 plugins wants an id field 在数据上，如果没有，它使选项“不可选择”。您可以提供一个 id 函数来覆盖此行为：

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

【讨论】：

我现在正在检查这个，我从来没有在任何地方的文档中看到过这个！

就是这样！非常感谢你。我会在一小时内奖励你赏金。

我通过谷歌搜索“select2 unselectable”找到了这个，这绝对是我的问题的解决方案......感谢 Murat......