JQuery для поиска onSearchEmpty нужно показать кнопку

Question

У меня есть кнопка, которую я хочу сделать видимой, когда поиск не даст результата, чтобы товар можно было добавить в таблицу данных.

Я пытался с onSearchEmpty: показать это, но это не работает.

Пожалуйста, предложите, так как onSearchEmpty, который является основной функцией для поисковой страницы jQuery, похоже, не работает.

Спасибо!

$(function () {
    $( '#table' ).searchable({
        striped: true,
        oddRow: { 'background-color': '#f5f5f5' },
        evenRow: { 'background-color': '#fff' },
        searchType: 'fuzzy'
    });
    
    $( '#searchable-container' ).searchable({
        searchField: '#container-search',
        selector: '.row',
        childSelector: '.col-xs-4',
        show: function( elem ) {
            elem.slideDown(100);
        },
        hide: function( elem ) {
            elem.slideUp( 100 );
        },
         onSearchEmpty: function() {
        	$('#shBtnAddNewProd').show();
			
    	}
    })
});

.row-padding {
    margin-top: 25px;
    margin-bottom: 25px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>
<div class="container">
    
    <div class="row">
        <div class="col-lg-12">
             <h3>Search and add product on the fly</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <input type="search" id="search" value="" class="form-control" placeholder="Type a name of product">
            <span class="linkTextboxBotton"> <a type="button" class="btn-success btn-xs" id="shBtnAddNewProd" style="display: none"> + add as new product </a> </span>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <table class="table" id="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th>Qty. </th>
                        <th>Disc. % </th>
						<th>Sum: </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Pro1</td>
                        <td>100</td>
                        <td>10</td>
                        <td>7</td>
                        <td>$0</td>
                        <td><a href="#"><i class="fa fa-trash"></i></a></td>
                    </tr>
                   <tr>
                        <td>Pro2</td>
                        <td>500</td>
                        <td>20</td>
                        <td>7</td>
                        <td>$0</td>
                        <td><a href="#"><i class="fa fa-trash"></i></a></td>
                    </tr>
                    <tr>
                        <td>Pro4</td>
                        <td>400</td>
                        <td>10</td>
                        <td>7</td>
                        <td>$0</td>
                        <td><a href="#"><i class="fa fa-trash"></i></a></td>
                    </tr>
                </tbody>
            </table>
            <hr>
        </div>
    </div>

Я пробовал поиск, но он не работает.

Answer 1

Прежде всего, я полагаю, вы неверно истолковали значение с помощью onSearchEmpty.Предполагается, что он запускается, когда поисковый термин пуст.На самом деле нет никаких обратных вызовов для поиска «результатов».

Во-вторых, вы можете пропустить все $( '#searchable-container' ).searchable({ }) и работать только на $( '#table' ).searchable({ }).Я предполагаю, что это был какой-то тест?

В-третьих, когда нет обратных вызовов для поиска, вы должны создать его самостоятельно.Этот поисковый плагин не выполняет ничего, кроме обновления строк display, то же самое будет делать ваш слайд / вниз.Вы можете создать универсальный обработчик, например, такой:

var emptySearch = function(element, term) {
   var total = element.find('tbody tr').length;
   var hidden = element.find('tbody tr:hidden').length;
   if (total == hidden) {
      $('#shBtnAddNewProd').show()
   } else {
      $('#shBtnAddNewProd').hide()
   }
}

И использовать его как обратный вызов

$( '#table' ).searchable({
    striped: true,
    oddRow: { 'background-color': '#f5f5f5' },
    evenRow: { 'background-color': '#fff' },
    searchType: 'fuzzy',
    onSearchActive: emptySearch,  // <---here
    onSearchEmpty: emptySearch,   // and here
    show: function( elem ) {
        elem.slideDown(100);
    },
    hide: function( elem ) {
        elem.slideUp( 100 );
    },
});

Теперь он работает, более или менее -> http://jsfiddle.net/o9tj0g31/Меньше, потому что плагин плохо справляется с вызовом обратных вызовов.Иногда требуется дополнительная keyup.Я не вижу причин для оптимизации 5-летнего плагина jQuery, который больше не поддерживается.

Возможно, вы могли бы изменить emptySearch так, чтобы он работал непосредственно с таблицей, а не с пропущенным элементом, и тем самым включал бы скрытие / отображение также для размытия и фокусировки.