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

Question

Hi Stackoverflow Community,

I've got the following problem and I can't handle it myself:

I've got the following search form:

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

And I'm using following jQuery code to filter ul items:

(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);

This works fine .. but if I put the #FilterForm input into the popover it doesn't filter out my uls anymore.

My Popover jQuery code:

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

my UL hasn't any special tags or anything.

Thanks in advance and sorry for my weird English [Ed - fixed]: I am from Germany.

Greetings, Daniel

Answer 1

@user2908086, Its because you are using the same "filterform" text twice in the same input field but in different Types! Here is what you use: id="FilterForm" + class="filterform" ! Locate the "filterform" class text in your CSS and rename the "filterform" and make sure its not the same as your ID. Then add the same class name back in your input and see if that will work for you! Good luck!