创建一个搜索框

我想要做的是允许用户在下面的搜索框中（在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

创建一个搜索框

回答

相关问题