Load-gif plaatsen in input-box

[tuxy]

Hallo,

Mijn site is voorzien van een autoSuggest-functie. dit kan je best testen wanneer je een letter in de input-box typt en een 2 tal seconden wacht:

http://www.vazodo.com/

Graag had ik een loader-gifje in de inputbox geplaatst, wanneer de autosuggestbox nog niet zichtbaar is, zoals bij dit script:

http://papermashup.com/jquery-php-ajax-autosuggest/
http://papermashup.com/demos/autosuggest/ (demo)

Het geanimeerde gifje heb ik al. Maar hoe kan ik dit integreren in mijn site?

Christophe

 

[That Guy]

Met CSS kan je de background-image prop gebruiken. Gewoon zoiets in je JS:
[JS]// als er begint wordt met zoeken
document.gEBY('input').style.backgroundImage = "url(loader.gif)";

// als er iets gevonden is, dus bij de callback van je AJAX (oid)
documet.gEBY('input').style.backgroundImage = ""; // eh, ofzoiets.[/JS]Mooier is mischien de class veranderen. Heb je ook geen problemen met je unsetten.


:thumb:

 

[tuxy]

That Guy,

Alvast bedankt voor je reactie.

In het voorbeeld:
http://papermashup.com/jquery-php-ajax-autosuggest

Staat de css-class:

.load{
background-image:url(loader.gif);
background-position:right;
background-repeat:no-repeat;
}

Javascript die de autosuggest oproept op mijn site:
[JS]
<script type="text/javascript">
var options = {
script:"config/suggests.php?json=true&limit=6&",
varname:"input",
json:true,
shownoresults:false,
maxresults:6,
callback: function (obj) { document.getElementById('testid').value = obj.id; }
};
var as_json = new bsn.AutoSuggest('search_input', options);

</script>
[/JS]

Hier mijn input-box:

<input class="left" type="text" name="search" accept-charset="UTF8"  id="search_input" autocomplete="off"/>

Heb je enig idee hoe dit te integreren?

Kan eventueel nog een inline-style toepassen in de input-box.

Christophe