Javascript 在文本框中为jQuery自动完成添加加载图标

我有以下自动完成代码，运行良好

我只想添加一个类，在AJAX调用期间显示加载图像，并在AJAX调用完成后删除加载图像

我知道我可以使用jQuery的addClass和removeClass并做到这一点。问题是我无法理解应该在哪一行添加addClass，在哪一行添加removeClass

你能帮忙吗

   (function( $ ) {
        $(function() {
             // Custom autocomplete instance.
            $.widget( "app.autocomplete", $.ui.autocomplete, {

                // Which class get's applied to matched text in the menu items.
                options: {
                    highlightClass: "ui-state-highlight"
                },

                _renderItem: function( ul, item ) {



   // Replace the matched text with a custom span. This
                // span uses the class found in the "highlightClass" option.
                var re = new RegExp( "(" + this.term + ")", "gi" ),
                    cls = this.options.highlightClass,
                    template = "<span class='" + cls + "'>$1</span>",
                    label = item.label.replace( re, template ),
                    $li = $( "<li/>" ).appendTo( ul );

                // Create and return the custom menu item content.
                $( "<a/>" ).attr( "href", "#" )
                           .html( label )
                           .appendTo( $li );

                return $li;

            }

        });
        var autocompleteTextbox = '<div class="autocomplete-search autocomplete-search-open">'
                                    +'<a href="#" class="st-btn01 autocomplete-search-icon"><i class="search-icon" aria-hidden="true"></i></a>'
                                    +'<div class="autocomplete-search-sub1">'
                                        +'<form role="search" method="get" action="<?php echo esc_url( home_url( '+"/"+' ) ); ?>">'
                                            +'<input type="text" name="s" class="form01 autocomplete-search-input" id="autocomplete-search-input" placeholder="Type something" autocomplete="off">'
                                            +'<a href="#" class="st-btn02 autocomplete-search-icon"><i class="searchx-icon" aria-hidden="true"></i></a>'
                                        +'</form>'
                                    +'</div>'
                                +'</div>';

        var appendElement = function(){
            $('.st-navbar-collapse').append(autocompleteTextbox);
            $(this).unbind('click');
            $(".st-search .st-btn01 .search-icon").addClass('text-visibility');
        };
        $(".two-brokers").parent('a').on('click',appendElement);

        var removeElement = function(){
            $(this).parents('.autocomplete-search').remove();
            $(".two-brokers").parent('a').bind('click',appendElement);
            $(".st-search .st-btn01 .search-icon").removeClass('text-visibility');
        };
        $("body").on("click",".st-btn02.autocomplete-search-icon",removeElement);

        var searchRequest,timeoutRequest;
        $("body").on("keyup",".autocomplete-search-input",function(){
            clearTimeout(timeoutRequest);
            var _this = $(this);
            timeoutRequest = setTimeout(function(){
                // create an jq-ui autocomplete on your selected element
                _this.autocomplete({
                    minChars: 2,
                    highlightClass: "bold-text",
                    // use a function for its source, which will return ajax response
                    source: function(request, response){
                        try { searchRequest.abort(); } catch(e){}
                        // well use postautocomplete_search.ajax_url which we enqueued with WP
                        $.post(postautocomplete_search, {
                            action: 'get_test_pages',            // our action is called search
                            term: request.term           // and we get the term form jq-ui
                        }, function(data) {
                            if(!data.length){
                                var result = [{
                                    label: 'No matches found', 
                                    value: response.term
                                }];
                                response(result);
                            }else{
                               response(data);
                            }
                        }, 'json');
                    },
                    select: function( evt, ui ) { 
                        evt.preventDefault();
                        window.location = ui.item.link;
                    }
                });
            },100);
        });
    });
})( jQuery );

（函数（$）{
$（函数（）{
//自定义自动完成实例。
$.widget（“app.autocomplete”，$.ui.autocomplete{
//哪个类get应用于菜单项中的匹配文本。
选项：{
highlightClass：“ui状态突出显示”
},
_renderItem：功能（ul，项目）{
//将匹配的文本替换为自定义范围。此
//span使用在“highlightClass”选项中找到的类。
var re=new RegExp（“（“+this.term+”），“gi”），
cls=this.options.highlightClass，
template=“$1”，
标签=项目。标签。更换（re，模板），
$li=$（“
”）。附录（ul）；
//创建并返回自定义菜单项内容。
$( "'
+''
+“您可以将div设置为在模板上隐藏，然后在需要时进行隐藏和显示

   <div class="loader"></div>

所以，当您尝试使用ajax时，基本上应该显示它，当您返回结果时，应该隐藏它

您可以在模板上将div设置为隐藏，然后在需要时进行隐藏和显示

   <div class="loader"></div>

所以，当您尝试使用ajax时，基本上应该显示它，当您返回结果时，应该隐藏它

我只复制了代码的相关部分，并添加了addClass（）/removeClass（）

这是一个附加输入键…和一个删除
.post（）
回调

$("body").on("keyup",".autocomplete-search-input",function(){


  // ADD on keyup
  $("#loaderImgId").addClass("spin");


  clearTimeout(timeoutRequest);
  var _this = $(this);
  timeoutRequest = setTimeout(function(){
    // create an jq-ui autocomplete on your selected element
    _this.autocomplete({
      minChars: 2,
      highlightClass: "bold-text",
      // use a function for its source, which will return ajax response
      source: function(request, response){
        try { searchRequest.abort(); } catch(e){}
        // well use postautocomplete_search.ajax_url which we enqueued with WP
        $.post(postautocomplete_search, {
          action: 'get_test_pages',            // our action is called search
          term: request.term           // and we get the term form jq-ui
        }, function(data) {



          // REMOVE when Ajax result is in!
          $("#loaderImgId").removeClass("spin");


          if(!data.length){
            var result = [{
              label: 'No matches found', 
              value: response.term
            }];
            response(result);
          }else{
           response(data);
          }
        }, 'json');
      },
      select: function( evt, ui ) { 
          evt.preventDefault();
          window.location = ui.item.link;
      }
    });
  },100);
});

我只复制了代码的相关部分，并添加了我将放入addClass（）/removeClass（）的内容

这是一个附加输入键…和一个删除
.post（）
回调

$("body").on("keyup",".autocomplete-search-input",function(){


  // ADD on keyup
  $("#loaderImgId").addClass("spin");


  clearTimeout(timeoutRequest);
  var _this = $(this);
  timeoutRequest = setTimeout(function(){
    // create an jq-ui autocomplete on your selected element
    _this.autocomplete({
      minChars: 2,
      highlightClass: "bold-text",
      // use a function for its source, which will return ajax response
      source: function(request, response){
        try { searchRequest.abort(); } catch(e){}
        // well use postautocomplete_search.ajax_url which we enqueued with WP
        $.post(postautocomplete_search, {
          action: 'get_test_pages',            // our action is called search
          term: request.term           // and we get the term form jq-ui
        }, function(data) {



          // REMOVE when Ajax result is in!
          $("#loaderImgId").removeClass("spin");


          if(!data.length){
            var result = [{
              label: 'No matches found', 
              value: response.term
            }];
            response(result);
          }else{
           response(data);
          }
        }, 'json');
      },
      select: function( evt, ui ) { 
          evt.preventDefault();
          window.location = ui.item.link;
      }
    });
  },100);
});

您只需要添加一个类
.ui autocomplete loading
，并指定一个背景图像

它自动检测类，并在请求完成时添加和删除加载图像

.ui-autocomplete-loading 
{
    background: white url("HERE_GOES_LOADING_IMAGE_URL") right center no-repeat;
}

您只需要添加一个类
.ui autocomplete loading
，并指定一个背景图像

它自动检测类，并在请求完成时添加和删除加载图像

.ui-autocomplete-loading 
{
    background: white url("HERE_GOES_LOADING_IMAGE_URL") right center no-repeat;
}