JavaScript Авто Полная помощь по поиску штриховки

Question

Я создаю прототип для веб-сайта, и я использую код JavaScript, чтобы имитировать опыт автозаполнения, например google на панели поиска.

Однако я изменил массив в списке примеров, чтобы включить изображение. Проблема возникает, когда я делаю выбор.

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'); 

массив 1 будет отображаться корректно в поле ввода HTML, но если я нажимаю это поле ввода будет показывать: «Apple IMG SRC =» изображений/автозаполнение/Apple.png»ширина =„627“высота = «40» «Я только хочу, чтобы он показывал« Apple ».

Вторая проблема - выравнивание. Если я поместил изображение перед текстом (как показано в массиве 2), я получаю файл с разбитым изображением вместо изображения.

Любая идея о том, как исправить эти проблемы? Спасибо.

Answer 1

Во-первых, я вижу опечатку. customarray[0] должен быть

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

Во-вторых, когда вы ставите этот текст в HTML-тег, убедитесь, что вы используете innerHTML свойство. Это может быть что-то вроде этого

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