Dynamically auto select , changes Image elsewhere

This is just me thinkign of jazzing up a mundane input field.

Ok so we have an input element, and we have pre-propagated small db table with id , name and image name

So this is what I am thinking.

We have an input element, where user begins typing. Lets say APPL...

Drop down ( for live auto suggest pops up ) with APPLE , they select APPLE and within another div element elsewhere on the page, a image div displays apple.png

Likewise if they choose banana , similarly banana.png shows in that div .

Ok so what have we got now.

Well I have auto suggest ( live search auto complete done ) all fine and dandy.

I have input element working, and they can select as they type from suggestions.

What I cannot figure out is how, to use ( possibly ajax I suppose ) hmm .. or other method, a way of displaying an image elsewhere, that reflects the choice they made.

To make things easier.

All auto completes are the exact same as the image file name, so:

APPLE becomes apple.png CAKE becomes cake.php

I am sure js can help here. Just not sure how. I would have thought getElementById

Anyhoo .. sometimes, asking a question may invoke a response from someone who has done something similar.

Cannot show code, as the element I want to create , doesnt exist yet.

But for simplicity sake, lets take a select box method:

<select id="fruit" name="fruit">
                                <option value="">Please select a Fruit</option>
                                <option value="apple">Apple</option>
                                <option value="cake">Cake</option&开发者_运维问答gt;
                            </select>

Presently the Auto Suggest , Auto complete looks like this:

<div class="field"><label for="fruit">Pick a Fruit </label> 

 

Any help appreciated...

---

You can do this easily with jQuery. Copy the code sample below and paste it between the body tags of an html file. Replace the "myselector" element's option values with your own. When you select an item from the drop menu, the image will dynamically change.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(function() {
    $("#myselector").change(function() { // Assign a handler.
        if ($("#myselector").val() != '') {
            $("#myimage").attr('src', $("#myselector").val()); // Change the image.
        }
    });
});
</script>

<select name="myselector" id="myselector">
    <option value="">Select Image</option>
    <option value="http://www.gravatar.com/avatar/e2f0c2f013205c397a7b00bc3012a027?s=32&d=identicon&r=PG">Image 1</option>
    <option value="http://www.gravatar.com/avatar/06383b51463f855d7cc0f07d4566bd42?s=32&d=identicon&r=PG">Image 2</option>
</select>

<img name="myimage" id="myimage" src="http://www.gravatar.com/avatar/c259fe3371bba238ad95021e67741e9c?s=32&d=identicon&r=PG" />

---

Add an image on your page:

<img src="default.jpg" id="result_image" />

When your autocomplete code fills in the text, change the image as well

document.getElementById('result_image').src = autocompleted_text + ".jpg";