Jak pokazać ładowanie obrazu (animowany plik .gif) wewnątrz pola tekstowego autouzupełniania za pomocą MVC3

Question

Zaimplementowałem pole tekstowe Autouzupełnianie w mojej aplikacji asp.net MVC3, ale nie mogę wyświetlić obrazu wczytywania wewnątrz pola tekstowego podczas wyszukiwania. Mój kod jest

JavaScript

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 

$(document).ready(function() { 
    $("#txtPONO").autocomplete({ 
     source: "/Transection/GetPONO", 
     minLength: 2, 
     select: function (event, ui) { 
      $("#hdnPurContID").val(ui.item.id); 
     } 
    }); 
}); 


</script> 

Zobacz

<div style="float: left; padding: 9px 5px 5px 5px; width: 80px; vertical-align: middle" 
           class="fieldHead"> 
           Enter @Html.LabelFor(l => l.PurchaseContract.AOPLPONO) 
          </div> 
          <div style="float: left; width: 200px; padding: 5px 0px 5px 0px;"> 
           @Html.TextBoxFor(m => m.PurchaseContract.AOPLPONO, new { @id = "txtPONO", @class = "textbox", @style = "width:100%" }) 
          </div> 
          <div style="float: left; width: 50px; padding: 4px 0px 0px 5px;"> 
           <img alt="search" src="../../Content/images/Search.png" /> 
           @Html.HiddenFor(model => model.PurchaseContract.PurContID, new { @id = "hdnPurContID" }) 
          </div> 

chcę pokazać mały załadunek i mag wewnątrz pola tekstowego po prawej stronie

Answer 1

Dodaj klasę css podobną do tej.

.loading 
{ 
    background:url('path to your image') no-repeat right center; 
} 

Teraz wywołać z opcją wyszukiwania i otwartych opcji autouzupełniania

$("#txtPONO").autocomplete({ 
     source: "/Transection/GetPONO", 
     minLength: 2, 
     select: function (event, ui) { 
      $("#hdnPurContID").val(ui.item.id); 
     }, 
     search: function(){$(this).addClass('loading');}, 
     open: function(){$(this).removeClass('loading');} 

    }); 

OR

Jeszcze lepszym rozwiązaniem byłoby po prostu automatycznie przy użyciu klasy css

.ui-autocomplete-loading { background:url('img/loading.gif') no-repeat right center } 

jQuery ui-autocomplete-loading uruchamia obraz ładowania na czas ładowania

Nadzieja pomaga

Answer 2

Można to zrobić jak to-

.loadinggif { 
 
    background:url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat right center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<input id='inputsource' /> 
 
<br> 
 
<button onclick="$('#inputsource').addClass('loadinggif');">Show Loading</button> 
 
<br> 
 
<button onclick="$('#inputsource').removeClass('loadinggif');">Hide Loading</button>