Question

我已经制作了自动完成搜索功能，当找到数据时，我使用<a>标记重定向到另一个页面，当找不到数据时使用<p>标记，这样它就不会重定向到另一个页面但问题是，它仍在重定向。

jQuery代码

    jQuery( "#id" ).autocomplete({

              source: function(request, response) {
                    jQuery.ajax({
                        url: site_url,
                        dataType:'json',
                        data: {
                            tsEmpNum: jQuery('#type').val(),
                            term: request.term
                        },
                        success: function (data){
                       //check if no users found
                       if(data.length  == 0){
                          var data=["No Users Found"];
                       }
                       response(data);
                        }
                    });
                },
                open: function(){
                setTimeout(function () {
                    jQuery('.ui-autocomplete').css('z-index', 99999999999999);
                }, 0);
            },
             minLength:2,
              select: function(event, ui) {
                jQuery("#birds").val(ui.item.value);
                jQuery(".form-search").submit(); }
                                    }).data('ui-autocomplete')._renderItem = function (ul, item) {

            if( (typeof item.image === 'undefined') || (typeof item.icon === 'undefined') ){ 

                                return jQuery("<li/>")
                                .data("item.autocomplete", item)
                                .append("<p class='search_not_found'><strong>"+ item.label +"</strong></p>")
                                .appendTo(ul);

                            }else{

                                return jQuery("<li/>")
                                .data("item.autocomplete", item)
                                .append("<a class='search_found'>" + item.image +item.label + item.icon + "</a>")
                                .appendTo(ul);
                            }
                    };

HTML输出

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; width: 357px; top: 191px; left: 835.1px; z-index: 2147483647;"><li class="ui-menu-item" id="ui-id-3" tabindex="-1"><p class="search_not_found"><strong>no data found</strong></p></li></ul>

当用户搜索某些内容时，如何从class=ui-menu-item删除<li>，以便它不会重定向？

Answer 1

不要删除类ui-menu-item，最好在select事件中处理。

select: function(event, ui) {
    if (ui.item.value=='no data found'){
        event.preventDefault()// cancelling the event prevents the value from  being updated
        return false;// returns from the method without redirecting to other page
    }
    ....

jQuery UI - 自动完成搜索删除类名

1 个答案: