Cách hiển thị hình ảnh tải (tệp .gif động) bên trong hộp văn bản tự động hoàn thành bằng cách sử dụng MVC3

Question

Tôi đã triển khai hộp văn bản Tự động điền trong ứng dụng asp.net MVC3 của mình, nhưng tôi không thể hiển thị hình ảnh tải bên trong hộp văn bản trong khi tìm kiếm. Mã của tôi là

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> 

Xem

<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> 

Tôi muốn thể hiện một tải nhỏ i mage bên trong hộp văn bản ở bên phải

Answer 1

Thêm một lớp css như thế này.

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

Bây giờ kích hoạt để tùy chọn tìm kiếm và lựa chọn mở cho autocomplete

$("#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');} 

    }); 

HOẶC

Ngay cả giải pháp tốt hơn sẽ chỉ sử dụng các lớp css

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

jQuery ui-autocomplete-loading tự động chạy hình ảnh tải trong thời gian tải

Hy vọng nó giúp

Answer 2

Bạn có thể làm điều đó như this-

.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>