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

JavaScript自动完成搜索栏修改帮助

1 个答案: