select .js关于无结果插件和允许默认链接行为的问题

selectize.js questions about a no result plugin and allowing default behaviour on link

本文关键字:默认 链接 问题 许默认 js 无结果 插件 select      更新时间:2023-09-26

我使用的是一个自动建议字段的选择,我已经使用了no_results插件之一,当没有结果时显示一个链接,这在大多数情况下都很有效,但我有一些戏剧我只是不确定如何绕过

我有两件事需要帮助

第一个最重要的-如何传递变量给插件我有几个页面上选择的多个实例,所以我需要传递vars hr_linkhr_label到插件,所以我不需要重新创建插件30次,只是这些vars不同的

2nd -允许链接被点击,绕过默认行为为了使链接可点击,我已经使用了onmousedown()touchstart(),但是是否有更好的方法来重新启用默认单击结果框中的这个链接。

我花了很多时间研究这些物品,所以我不认为它是重复的

//The Plugin

    Selectize.define('header_no_results', function( options ) {
        var KEY_LEFT      = 37;
        var KEY_UP        = 38;
        var KEY_RIGHT     = 39;
        var KEY_DOWN      = 40;
        var ignoreKeys = [KEY_LEFT, KEY_UP, KEY_RIGHT, KEY_DOWN];
        var self = this;
        var hr_link =  'http://link_to_info.com';
        var hr_label = 'country';

        options = $.extend({
            message: ' No results found:  <a href="#" onmousedown="window.open('''+hr_link+'''); return false;" touchstart="window.open('''+hr_link+'''); return false;"> click here </a> to add a'+hr_label,
            html: function(data) {
                return '<div class="selectize-dropdown-content">' + data.message + '</div>';
            }
        }, options );

        self.on('type', function() {
            var message = 'Not Found: <a href="#" onmousedown="window.open('''+hr_link+'''); return false;" touchstart="window.open('''+hr_link+'''); return false;"> click here </a> Add a '+hr_label;
            if (!self.hasOptions) {
                self.$empty_results_container.html(message).show();
            } else {
                self.$empty_results_container.hide();
            }
        });

        self.onKeyUp = (function() {
            var original = self.onKeyUp;
            return function ( e ) {
                if (ignoreKeys.indexOf(e.keyCode) > -1) return;
                self.isOpen = false;
                original.apply( self, arguments );
            }
        })();
        self.onBlur = (function () {
            var original = self.onBlur;
            return function () {
                original.apply( self, arguments );
                self.$empty_results_container.hide();
            };
        })();
        self.setup = (function() {
            var original = self.setup;
            return function() {
                original.apply( self, arguments);
                self.$empty_results_container = $(
                    options.html($.extend({
                        classNames: self.$input.attr( 'class' )
                    }, options))
                );
                self.$empty_results_container.hide();
                self.$dropdown.append(self.$empty_results_container);
            };
        })();
    });

//调用插件的函数

    $('#companyLinks').selectize({
        valueField: 'id',
        labelField: 'display',
        searchField: 'display',
        maxItems: 1,
        options: [],
        create: false,
        onItemAdd: function(value){
            window.location.href = 'http://my_link.com/'+value;
        },
        load: function(query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: 'http://link.com/get/list',
                type: 'GET',
                dataType: 'json',
                data: {
                    q: query
                },
                error: function() {
                    callback();
                },
                success: function(res) {
                    callback(res);
                    //window.open($(res).val(), '_self');
                }
            });
        },
        plugins: ['header_no_results']

    });

传递var的解决方案并不那么困难,毕竟只需要在正确的位置查找,这里有进一步的信息

在函数中我们需要改变

 plugins: ['header_no_results']

plugins: { "header_no_results": {
            link : "page/location",
        } }
然后我们可以检索link并通过 声明我们在插件中需要的var
var hr_link =  options.link;