0

私はウェブサイトのプロトタイプを作成しており、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番目の問題はアライメントです。テキストの前に画像を配置すると（配列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 に答える