JavaScript自動完成搜索欄修改幫助

我正在爲網站構建原型，我正在使用JavaScript代碼來模擬Google在其搜索欄上的自動完成體驗。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輸入字段正確顯示，但如果我點擊它輸入字段將顯示：「蘋果IMG SRC =」圖像/自動完成/ Apple.png」 WIDTH = 「627」 HEIGHT = 「40」「我只想讓它顯示」Apple「。

第二個問題是對齊。如果我將圖像放在文本之前（如數組2中所示），我得到一個破碎的圖像文件而不是圖像。

有關如何解決這些問題的任何想法？謝謝。

來源

2012-05-28 fyz

首先，我看到一個錯字。 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-28 03:15:34 jwatts1980

謝謝我得到它的工作。 - 格式化我的問題時發生拼寫錯誤，但是我的源代碼很好。 – fyz

JavaScript自動完成搜索欄修改幫助

回答

相關問題