javascript - 在 Bootstrap Popover 中使用 jQuery Search 但方法不会触发

Question

您好 Stackoverflow 社区，

我遇到了以下问题，我自己无法处理:

我有以下搜索表单:

    <li class="list-group-item active" data-ignore-list-search="ignore"><?php echo $translate->_('Animals'); ?><span class="icon-search pull-right" rel="SearchBox" data-placement="bottom" data-container="body"></span>

        <div id="popover_content_wrapper" class="hide">
        <input placeholder="<?php echo $translate->_('Search'); ?> " id="FilterForm" class="filterform filterinput" type="text">
        </div>
    </li>

我正在使用以下 jQuery 代码来过滤 ul 项目:

(function(jQuery){
var ListSearch = function() {};
ListSearch.prototype = {
    /**
     * run
     * start incremental search.
     * @param {} input
     * @param {} target
     * @returns {} 
     */
    run: function(input, target){
        var _this = this;
        var tagName = target.get(0).tagName;

        input.on('keyup', function(e){
            text = _this.getInputText(input);

            switch(tagName){
            case 'TABLE':
                _this.listSearchTable(target, text);
                break;
            case 'UL':
                _this.listSearchListUl(target, text);
                break;
            case 'OL':
                _this.listSearchListOl(target, text);
                break;
            case 'DL':
                _this.listSearchListDl(target, text);
                break;
            default:
                throw new Error('Illegal tag name ' + targetObject.targetTagName);
            }
        });
    },

    getInputText: function(input){
        return input.val();
    },

    /**
     * tag table
     */
    listSearchTable: function(target, text){
        this.listSearchCommon('tr', target, text);
    },

    /**
     * tag ul
     */
    listSearchListUl: function(target, text){
        this.listSearchCommon('li', target, text);
    },

    /**
     * tag ol
     */
    listSearchListOl: function(target, text){
        return this.listSearchListUl(target, text);
    },

    /**
     * tag dl
     */
    listSearchListDl: function(target, text){
        this.listSearchCommon('dd dt', target, text);
    },

    /**
     * commondSearchList
     */
    listSearchCommon: function(tagName ,target, text){
        var _this = this;
        var searchWords = this.searchWordToWords(text);
        var wordLength = searchWords.length;

        target.find(tagName).each(function(){
            var thisJQuery = jQuery(this);
            if (thisJQuery.data('ignore-list-search') === 'ignore') return true;

            var body = _this.getBody(thisJQuery);
            var displayFlag = true;

            var wordCount = 0;
            for(wordCount = 0; wordCount < wordLength; wordCount++){
                var word = searchWords[wordCount];

                var pattern = new RegExp(word, 'i');
                if ( !body.match(pattern) ) {
                    displayFlag = false;
                    break;
                }
            }

            jQuery(this).css('display', _this.getDisplayProperty(tagName, displayFlag));
            return true;
        })
    },

    /**
     * getDisplayProperty
     * @param {} tagName
     * @param {} flag
     * @returns {} 
     */
    getDisplayProperty: function(tagName, flag){
        switch(tagName){
        case 'tr':
            return flag?'table-row':'none';
        case 'li':
            return flag?'block':'none';
        case 'dd dt':
            return flag?'list-item':'none';
        default:
            throw new Error('Illegal tag name ' + targetObject.targetTagName);
        }
    },

    /**
     * getBody
     * @returns {}
     */
    getBody: function(target){
        var body = target.text();
        return jQuery.trim(body);
    },

    /**
     * searchWordToWords
     * a search text split to search words.
     * @param {} body
     * @param {} searchWord
     * @returns {} 
     */
    searchWordToWords: function(text){
        text = jQuery.trim(text);
        var pattern = new RegExp(/[ 　\-\/]/);
        var words = text.split(pattern);

        // delete empty element
        var newWords = new Array();
        var wordsLength = words.length;
        var wordsCount = 0;
        for (wordsCount = 0; wordsCount < wordsLength; wordsCount++){
            var word = words[wordsCount];
            if (word != ""){
                newWords.push(words[wordsCount]);
            }
        }
        return newWords;
    }
}

/**
 * Main stream
 */
jQuery.fn.listSearch = function(input, options){
    var options = jQuery.extend(jQuery.fn.listSearch.defaults, options);

    // set using objects.
    var target = jQuery(this);
    switch (jQuery.type(input)){
        case 'string':
            input = jQuery(input);
            break;
        case 'object':
            input = input;
            break;
        default:
            throw 'Argiment value "' + input + '" is invalid.';
    }

    // Event start
    listSearch = new ListSearch();
    listSearch.run(input, target);

    return target;
};

/**
 * default settings.
 */
jQuery.fn.listSearch.defaults = {

};

    $('#AnimalList').listSearch('#FilterForm')

;

})(jQuery);

这很好用..但是如果我将#FilterForm 输入放入弹出框，它就不会再过滤掉我的 uls。

我的 Popover jQuery 代码:

$('[rel=SearchBox]').popover({ 
    html : true, 
    content: function() {
      return $('#popover_content_wrapper').html();
    },
    trigger: 'click'
});

我的 UL 没有任何特殊标签或任何东西。

提前致谢，抱歉我的英语很奇怪 [Ed - 已修复]:我来自德国。

您好，丹尼尔

Answer 1

@user2908086，这是因为您在同一输入字段中两次使用相同的“filterform”文本，但类型不同!这是您使用的:id="FilterForm" + class="filterform"!在您的 CSS 中找到“filterform”类文本并重命名“filterform”并确保它与您的 ID 不同。然后在您的输入中添加相同的类名，看看它是否适合您!祝你好运!