Question

I am building a prototype for a website and I am using a JavaScript code to simulate the autocomplete experience like google has on it’s search bar.

However I have modified the array in the sample list to include an image. The problem occurs when I make a selection.

var customarray=new Array(
    '1 Apple /img src="images/AutoComplete/Apple.png" width="627" height="40" />',
    '2 <img src="images/AutoComplete/Apple.png" width="627" height="40" /> Apple iMac ',
    '3 Apple iPad',
    'Apple iPhone',
    'Apple iPod',
    'Apple iPod Touch ',
    'Apple iPod Nano ',
    'Apple iPod Shuffle ',
    'Apple iPod Classic ',
    'Apple MacBook',
    'Apple MacBook Pro',
    'Apple TV');

array 1 will show correctly in the HTML input field, but if i click it the input field will show: “Apple img src=”images/AutoComplete/Apple.png” width=”627″ height=”40″ ” I only want it to show “Apple”.

The second issue is alignment. If I place the image before the text (as show in array 2) i get a broken image file instead of the image.

Any idea on how to correct these issues? Thank you.

Answer 1

First, I see a typo. customarray[0] should be

'1 Apple <img src="images/AutoComplete/Apple.png" width="627" height="40" />'

Second, when you are putting this text into the HTML tag, make sure you’re using the innerHTML property. It can be something like this

<div id="dropdownbox"></div>
<script type="text/javascript">
    //whatever code you have that executes when a search is done
    //...

    var html;
    var div = document.getElementById("dropdownbox");
    div.innerHTML = ""; //clears the results

    for (var i=0; i<customarray.length; i++) {
        html += "<div>" + customarray[i] + "</div>";
    }

    div.innerHTML = html;

    //...
</script>