創建一個搜索框

我想要做的是允許用戶在下面的搜索框中（在HTML中）基於藝術家的名字尋找藝術家，然後向用戶呈現藝術家的名字和鏈接到如果用戶的搜索與數組中的藝術家匹配，則使用不同的HTML頁面。創建一個搜索框

麻煩的是，當我點擊「搜索」頁面會回到原來的頁面。我不確定斷開連接的位置。我不確定我是否正確地呼叫ID;如果身份證在正確的地方;如果該操作在U.addEvent函數中是正確的;或者如果搜索功能寫入正確。

任何想法？

<body> 
<div class="imgs"> <a target="_blank" href=""><img src="img/04.png" alt="img" /></a></div> 
</div> 

    <div class="form"> 
    <form method="post" action="handler.php"> 
     <input name="textfield" id="searchBox" type="text" class="colortext"/> 
    </form> 
    </div> 
</div> 

<script> 
var fakeDatabase = []; 

var foxyShazam = { 
    id: 'foxyShazam_FS', 
    title: 'Foxy Shazam', 
    artist: 'Foxy Shazam', 
    price: '$14.99', 
    releaseDate: new Date(1968, 10, 22), 
    quantity: 50, 
    link: "albums/foxyShazam.html",] 
}; 

var foxyShazam2 = { 
    id: 'foxyShazam_FS_2', 
    title: 'Foxy Shazam 2', 
    artist: 'Foxy Shazam 2', 
    price: '$14.99', 
    releaseDate: new Date(1968, 10, 22), 
    quantity: 50, 
    link: "albums/foxyShazam.html"] 
}; 

var thriller = { 
    id: 'thriller_MJ', 
    title: 'Thriller', 
    artist: 'Michael Jackson', 
    price: '$12.99', 
    releaseDate: new Date(1982, 10, 30), 
    quantity: 35, 
    link: "albums/thriller.html" 
}; 

var thriller2 = { 
    id: 'thriller_MJ_2', 
    title: 'Thriller 2', 
    artist: 'Michael Jackson 2', 
    price: '$12.99', 
    releaseDate: new Date(1982, 10, 30), 
    quantity: 35, 
    link: "albums/thriller.html"] 
}; 

fakeDatabase.push(foxyShazam, foxyShazam2, thriller, thriller2); 

//function displayAlbum() { 
// 'use strict'; 
// for (var i=0; i < fakeDatabase.length; i++) { 
//  alert(fakeDatabase[i].title);} 
//}; 
//displayAlbum(fakeDatabase); 

var U = { 
    $: function (id) { 
     'use strict'; 
     if (typeof id === 'string') { 
      return document.getElementById(id); 
     } 
    }, 
    setText: function(id, message) { 
     'use strict'; 
     if ((typeof id == 'string') 
     && (typeof message == 'string')) { 

      // Get a reference to the element: 
      var output = this.$(id); 
      if (!output) return false; 

      // Set the text 
      if (output.textContent !== undefined) { 
       output.textContent = message; 
      } else { 
       output.innerText = message; 
      } 
      return true; 
     } // End of main IF. 
    }, 
    addEvent: function(obj, type, fn){ 
     'use strict'; 
     if (obj && obj.addEventListener) { 
      obj.addEventListener(type, fn, false); 
     } else if (obj && obj.attachEvent) { 
      obj.attachEvent('on' + type, fn); 
     } 
    }, 
    removeEvent: function(obj, type, fn) { 
     'use strict'; 
     if (obj && obj.removeEventListner) { 
      obj.removeEventListner(type, fn, false); 
     } 
     else if (obj && obj.removeEvent) { 
      obj.removeEvent('on' + type, fn); 
     } 
    } 
}; 

function search() { 
    'use strict'; 
    var newSearch = U.$('searchBox'); 
     if (typeof newSearch == 'string') { 
      if (!newSearch) 
       {return false;}; 
      if (newSearch.textContent !== undefined) { 
       for (var i=0; i < fakeDatabase.length; i++) { 
        if (i == newSearch) { 
         var options = document.getElementById('options'); 
         (options.innerText = ((fakeDatabase[i].artist + '\n') + (fakeDatabase[i].link)); 
         return true; 
        } 
       } 
      } 
     } 
    }; 

U.addEvent(U.$('searchBox'), 'click', search()); 

</script> 
</body>

來源

2014-04-21 user3538317

敢肯定這應該是'U.addEvent（ ...，...，搜索）'，'search'後面沒有括號 – lordvlad

search回報什麼。但事件處理程序需要是一個函數。所以你要麼U.addEvent(U.$('searchBox'), 'click', search);要麼讓search()返回一個事件處理程序。

基本上現在你立即調用搜索處理程序，你的表單什麼都不做。

您還在input字段上有click處理程序。這將是非常無用的，因爲當用戶只需點擊輸入字段時不需要發生任何事情。

來源

2014-04-21 13:16:18 TheShellfishMeme

我看到有幾個錯誤。 @TheShellfishMeme已經指出那些二：

首先，你正在使用的不是search功能本身search函數作爲事件處理程序的返回值，：

// this calls the 'search' function and uses it's return value as event handler 
U.addEvent(U.$('searchBox'), 'click', search()) 

// this uses the function 'search' as the event handler 
U.addEvent(U.$('searchBox'), 'click', search)

二，您正在input元素上添加click處理程序，每當用戶單擊輸入字段（單擊是鼠標事件）時，這將導致觸發search函數。我想你真的想要搜索功能觸發當用戶點擊ENTER或提交按鈕。

爲了實現這個目標，添加search功能的處理程序中submit事件您form元素：

<form id="searchForm"> 
.... 
U.addEvent(U.$('searchForm'), 'submit', search)

三，你的搜索功能被觸發後，您需要確保該事件不會繼續執行發佈數據的默認事件行爲。要解決這個問題，你需要一個event.preventDefault()。但你也需要趕上event變量在函數定義：

function search (event) { 
    event.preventDefault(); 

    ..... 

}

你也有一些小的語法錯誤，我試圖修復此：http://jsfiddle.net/rGcpX/2/

來源

2014-04-21 13:19:27 lordvlad

創建一個搜索框

回答

相關問題