JavaScript Auto Complete 搜索栏修改帮助

Question

我正在为一个网站构建原型，我正在使用JavaScript代码来模拟自动完成体验，就像谷歌在搜索栏上一样。

但是，我已经修改了示例列表中的数组以包含图像。当我进行选择时出现问题。

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="images/AutoComplete/Apple.png" width="627" height="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>