Question

我正在使用selectize作为自动推荐字段，我使用其中一个no_results插件在没有结果时显示链接，这在大多数情况下效果很好，但是我有一些戏剧，我只是不确定如何绕过

我需要两件事来获得帮助

第一重要 - 如何将变量传递给插件 我在多个页面上有多个selectize实例，所以我需要将vars hr_link 和 hr_label 传递给插件，所以我不必重新创建插件只有那些不同的变量的30次

第二 - 允许点击链接，绕过默认行为 要使链接可点击，我使用了 onmousedown（）和 touchstart（），但有更好的方法可以重新启用此链接中的默认点击结果框。

我花了很多时间研究这些项目，所以我不认为它是重复的

//插件

    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']


    });

Answer 1

传递var的解决方案并不是那么难，毕竟只需要在正确的位置查看，还有更多信息here

在我们需要更改的功能中

 plugins: ['header_no_results']

带

plugins: { "header_no_results": {
            link : "page/location",
        } }

然后我们可以检索链接并通过

声明插件中我们需要的var

var hr_link =  options.link;

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

1 个答案: