如何在jquery插件中添加html标签?

时间:2017-01-03 02:43:23

标签: laravel jquery-plugins

我正在使用jquery插件进行实时搜索。当我尝试搜索不存在时,它只显示表格。如果它不存在,我想发一些消息“没有找到结果”。问题是如何添加消息“找不到结果”

注意:在我的代码中我添加了一些验证,用户需要输入最少3个字符

/**
    **options to have following keys:
        **searchText: this should hold the value of search text
        **searchPlaceHolder: this should hold the value of search input box placeholder
**/
(function($)
{
    $.fn.tableSearch = function(options)
    {
        if(!$(this).is('table'))
        {
            return;
        }
        var tableObj = $(this),

            searchText = (options.searchText)?options.searchText:'Search: ',
            searchPlaceHolder = (options.searchPlaceHolder)?options.searchPlaceHolder:'',
            divObj = $('<div style="font-size:20px;">'+searchText+'</div><br /><br />'),
            inputObj = $('<input style="min-width:25%;max-width:50%;margin-left:1%" type="text" placeholder="'+searchPlaceHolder+'" />'),
            caseSensitive = (options.caseSensitive===true)?true:false,
            searchFieldVal = '',
            pattern = '';
            inputObj.off('keyup').on('keyup', function(){
            searchFieldVal = $(this).val();
            if(searchFieldVal.length == 0) 
            { 
                tableObj.find('tbody tr').show(); 
            }
            else if(searchFieldVal.length >= 3)
            {
                pattern = (caseSensitive)?RegExp(searchFieldVal):RegExp(searchFieldVal, 'i');
                tableObj.find('tbody tr').hide().each(function()
                {
                    var currentRow = $(this);
                    currentRow.find('td').each(function()
                    {
                        var result = "No result";
                        $("tbody tr").append(result);
                        if(pattern.test($(this).html()))
                        {

                            currentRow.show();
                            return false;
                        }

                    });
                });
            }
        });
        tableObj.before(divObj.append(inputObj));
        return tableObj;
    }
}(jQuery));

1 个答案:

答案 0 :(得分:0)

这里进入JQ插件(在您的问题中发布),空结果的处理程序存在。看看它的一段代码。

else if(searchFieldVal.length >= 3)
{
    pattern = (caseSensitive)?RegExp(searchFieldVal):RegExp(searchFieldVal, 'i');
    tableObj.find('tbody tr').hide().each(function()
    {
        var currentRow = $(this);
        currentRow.find('td').each(function()
        {
            var result = "No result";
            $("tbody tr").append(result);
            if(pattern.test($(this).html()))
            {

                currentRow.show();
                return false;
            }

        });
    });
}

意思是你错了。重新检查一下。