0

我正在为一个网站构建一个原型，并且我正在使用 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 所示），我会得到一个损坏的图像文件而不是图像。

关于如何纠正这些问题的任何想法？谢谢你。

4

1 回答 1

0

首先，我看到一个错字。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>
于 2012-05-28T03:15:34.227 回答