Wie Laden Bild zeigen (animierte GIF-Datei) im Innern der automatischen Vervollständigung Textbox mit MVC3

Question

ich automatischer Vervollständigung Textbox in meiner asp.net MVC3 Anwendung implementiert habe, aber ich bin nicht in der Lage während der Suche innerhalb Textbox Lade Bild zu zeigen. Mein Code ist

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> 

Ansicht

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

ich einen kleinen Laden zeigen, möchte ich Magier innerhalb Textbox auf der rechten Seite

Answer 1

eine CSS-Klasse wie folgt hinzufügen.

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

auslösen Nun zum Suchoption und offene Optionen für die automatische Vervollständigung

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

    }); 

ODER

Noch bessere Lösung wäre, nur die CSS-Klasse

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

jQuery ui-autocomplete-loading automatisch Läuft das Ladebild für die Ladedauer

Hoffe, dass es

Answer 2

hilft es Ihnen gefällt this-

tun können

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