草庐IT

javascript - Select2 - Ajax 搜索 - 记住最后的结果

coder 2024-07-18 原文

我正在使用 Select2 3.5.1。使用此插件,我可以成功加载远程数据。但是,我今天在这里提出一个问题以改进此搜索。这是了解我想做什么的分步操作:

  1. 设置一个带有远程数据加载的 Select2(使用 ajax)。
  2. 点击 Select2 输入并搜索内容。
  3. 加载将出现,几秒钟后您将看到结果列表。
  4. 单击其中一个列出的结果 - 结果框随后会消失。
  5. 如果再次单击搜索框,列表将为空,您需要再次键入一些新文本才能获得结果列表。

有没有可能当我们再次点击搜索框时,没有任何ajax调用,之前搜索的结果列表重新出现?然后,如果用户删除一个字符或更改他的搜索条件,它将再次触发 ajax 搜索。

如果可能,我们将如何编码?

我希望我的问题很清楚,如果您有任何问题,请告诉我。谢谢。

这是一个非常简单的代码,我们在其中进行搜索并返回结果列表。它并没有真正进行搜索,但是当您键入某些内容时它确实会返回一个列表。我不确定如何使用其中一个响应中提到的 initSelection。

<html>
<head>
    <title>
        Test page for ajax cache
    </title>
    <script type='text/javascript' src='../../resources/javascript/jquery/jquery-1.9.1.min.js'></script>
    <link type='text/css' href='../../resources/javascript/select2/select2.css' rel='stylesheet' />
    <script type='text/javascript' src='../../resources/javascript/select2/select2.js'></script>

    <script>
    $(document).ready(function(){
        $('#select').select2({
            ajax: {
                type: 'POST',
                url: 'ajax.php',
                dataType: 'json',
                data: function(term, page){
                    return {
                        autoc: 'country',
                        term: term
                    }
                },
                results: function(data, page){
                    console.log(data);

                    return( {results: data.results} );
                }
            },
            placeholder: 'Search something',
            minimumInputLength: 3,
            width: '333'
        });
    });
    </script>
</head>

<body>
    <input type='text' name='inputdata' id='select' />
</body>
</html>

非常简单的 ajax.php 调用:

<?php
$results2['more'] = false;
$results2['results'][0] = array('id'=> "1", 'text'=> "California");
$results2['results'][1] = array('id'=> "2", 'text'=> "Canada");
$results2['results'][2] = array('id'=> "2", 'text'=> "Someword");
$results2['results'][3] = array('id'=> "2", 'text'=> "Alberta");
$results2['results'][4] = array('id'=> "2", 'text'=> "New York");

echo json_encode($results2);

最佳答案

我又看了一遍你的帖子。 我上次误会你了。

解决方案就在这里。

   $(document).ready(function () {
        $('#select').select2({
            // this part is responsible for data caching
            dataCache: [],
            query: function (q) {
                var obj = this,
                        key = q.term,
                        dataCache = obj.dataCache[key];

                //checking is result in cache
                if (dataCache) {
                    q.callback({results: dataCache.results});
                } else {
                    $.ajax({
                        url: 'ajax.php',
                        data: {q: q.term},
                        dataType: 'json',
                        type: 'POST',
                        success: function (data) {
                            //copy data to 'cache'
                            obj.dataCache[key] = data;
                            q.callback({results: data.results});
                        }
                    })
                }
            },
            placeholder: 'Search something',
            width: '333',
            minimumInputLength: 3,
        });
        // this part is responsible for setting last search when select2 is opening
        var last_search = '';
        $('#select').on('select2-open', function () {
            if (last_search) {
                $('.select2-search').find('input').val(last_search).trigger('paste');
            }
        });
        $('#select').on('select2-loaded', function () {
            last_search = $('.select2-search').find('input').val();
        });
    });

关于javascript - Select2 - Ajax 搜索 - 记住最后的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26466788/

有关javascript - Select2 - Ajax 搜索 - 记住最后的结果的更多相关文章

  1. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  2. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索,因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索?require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  3. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过?我有一个调用Controller方法的JqueryPOSTajax调用,但我没有在其中放置任何真实性代码,但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  4. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  5. ruby - 如何搜索有用的 ruby - 2

    寻找有用的ruby的好网站是什么? 最佳答案 AgileWebDevelopment列出插件(虽然不是ruby​​gems,我不确定为什么),并允许人们对它们进行评级。RubyToolbox按类别列出gem并比较它们的受欢迎程度。Rubygems有一个搜索框。StackOverflow对最有用的rails插件和ruby​​gems有疑问。 关于ruby-如何搜索有用的ruby,我们在StackOverflow上找到一个类似的问题: https://stacko

  6. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ? - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单,用户可以在其中添加一个唯一的电子邮件,并让电子邮件测试将其发送到该特定电子邮件。为了简单起见,我决定让测试电子邮件通过ajax执行,并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  7. ruby - 如何搜索、递增和替换 Ruby 字符串中的整数子字符串? - 2

    我有很多这样的文档:foo_1foo_2foo_3bar_1foo_4...我想通过获取foo_[X]的所有实例并将它们中的每一个替换为foo_[X+1]来转换它们。在这个例子中:foo_2foo_3foo_4bar_1foo_5...我可以用gsub和一个block来做到这一点吗?如果不是,最干净的方法是什么?我真的在寻找一个优雅的解决方案,因为我总是可以暴力破解它,但我觉得有一些正则表达式技巧值得学习。 最佳答案 我(完全)不懂Ruby,但类似这样的东西应该可以工作:"foo_1foo_2".gsub(/(foo_)(\d+)/

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby - Ruby 中的必应搜索 API - 2

    我读了"BingSearchAPI-QuickStart"但我不知道如何在Ruby中发出这个http请求(Weary)如何在Ruby中翻译“Stream_context_create()”?这是什么意思?"BingSearchAPI-QuickStart"我想使用RubySDK,但我发现那些已被弃用前(Rbing)https://github.com/mikedemers/rbing您知道Bing搜索API的最新包装器(仅限Web的结果)吗? 最佳答案 好吧,经过一个小时的挫折,我想出了一个办法来做到这一点。这段代码很糟糕,因为它是

  10. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

    我有一个集合选择:此方法的单选按钮是什么?谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中,它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/18525986/

随机推荐