如何在Jquery自动完成范围标记中添加加载栏?

时间:2016-08-19 07:06:57

标签: javascript jquery jquery-ui autocomplete

在此编码中,我在文本框中显示了进度条。但我在搜索某些东西时需要在span标签中加载指示器。我添加了两张图片来更好地了解它。请回答我的问题。

这是文本框中的平坦进展:

enter image description here

但我需要跨度

的进展

enter image description here

CSS:

<style type="text/css">
        .loader
        {
            background: url(resources/images/loader.gif);
            background-repeat: no-repeat;
            background-position: right;
        }
    </style>

JS:

 try {
        console.log('connections url ' , urlHolder.getconnectedusersByName);
            $("#auto-complete-tag").autocomplete({
                source: function(request, respond) {
                    $("#auto-complete-tag").addClass('loader');
                    var givenUserName = $("#auto-complete-tag").val();
                    $.post(urlHolder.getconnectedusersByName, {
                        userId : signedUserId,
                        username : givenUserName
                    }, function(response) {
                        $('#auto-complete-tag').removeClass('loader');
                        if(!response){
                            respond([]);
                            length = 0;
                        }
                        this.connectionsList = new Array();
                        for (var counter = 0; counter < response.users.length; counter++) {
                            var getConnectedUsers = new Object();
                            getConnectedUsers = {
                                value : response.users[counter].name,
                                //profileId : "onclick=return false",
                                image : response.users[counter].defaultImageFileName,
                                id:response.users[counter].id
                            }
                            this.connectionsList.push(getConnectedUsers);
                        }
                        respond (this.connectionsList);
                    });
                },
                delay: 0 ,
                search: function (e, u) {
                },
                select : function(event, ui) {
                    return false;
                },
                response: function(event, ui) {
                    length = ui.content.length;     
                    console.log('length',length );
                    if(length === 0) {
                        var noResult = {label:"No results found for you" };
                        ui.content.push(noResult);
                    } 
                },
            }) .data('ui-autocomplete')._renderItem = function(ul, item) {

                if(length !== 0){
                  return $('<li>')
                  .data( "ui-autocomplete-item", item)
                  .append(
                          '<a style="background-color: #E0F0EF; color:#0d78a3; margin-bottom: 3px; margin-top: 3px; margin-left: 3px; margin-right: 3px; font-weight: bold;">' + 
                          '<span style="color:#86BBC9; font-weight: normal;">' +
                          item.label  + '</span>' + '<br>'+'<span>Text message</span>'+
                          '<button style="margin-bottom:14px; margin-right:5px;" class=\"yellow-btn apply-btn\" id=\"apply-user-' + item.id + '\" onclick=\"openDFAChatWithUser(\'' + item.id + '\')\">Chat</button>' 
                          + '<span class="ui-autocomplete-icon pull-right"></span>' + 
                          '</a>'
                          )
                  .appendTo(ul);}else{
                      return $('<li>')
                      .data( "ui-autocomplete-item", item)
                      .append('<a>' +
                              '<span class="ui-autocomplete-user">' +
                              item.label  + '</span>' +
                              '<span class="ui-autocomplete-divider"></span>' + 
                              '<span class="ui-autocomplete-icon pull-right"></span>' + 
                              '</a>')
                      .appendTo(ul);

                  }
            };
            //console.log(' this.connectionsList >>> ', this.connectionsList);

    } catch (e) {
        console.log('getAllConnections error >>> ', e);
    }

0 个答案:

没有答案