Question

我的网站上有一个搜索框，可以搜索图书数据库。向用户显示以下选项：

搜索查询（文本输入字段）
搜索的位置（带有选项的选择字段：当前，存档或全部）
搜索内容（带选项的选择字段：标题，作者，所有者或读者）

当用户在搜索字段中输入输入时，您可以在搜索时使用Google提供的图书标题弹出式建议。我想知道如何检查他们选择搜索的选项（即标题，作者等）并相应地显示建议。

我使用的当前代码如下：

HTML

    <form method='get' action='/main'>
     <label for='search'>Search</label>
     <div style='position:relative;display:inline;'>
      <input type='text' id='search' name='search' onkeyup='showHint(this.value)' autocomplete='off'/>
      <div style='display:inline;' id='txtHint'></div>
     </div>
     <select name='searchIn'>
      <option name='searchIn' id='searchIn' value='current' selected>Current</option>
      <option name='searchIn' id='searchIn' value='archive'>Archive</option>
      <option name='searchIn' id='searchIn' value='all'>All</option>
     </select>
     <select name='searchBy' onChange='getSearchBy(this.value)'>
      <option name='searchBy' id='searchBy' value='Title' selected>By Title</option>
      <option name='searchBy' id='searchBy' value='Author'>By Author</option>
      <option name='searchBy' id='searchBy' value='Owner'>By Owner</option>
      <option name='searchBy' id='searchBy' value='Reader'>By Reader</option>
     </select>
     <input type='submit' class='submit' value='Submit'/>
    </form>

AJAX /使用Javascript

      function getSearchBy(val){
   return val;
  }
  function showHint(str){
   var xmlhttp;
   if (str.length==0){ 
    document.getElementById('txtHint').innerHTML='';
    return;
   }
   if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
   }
   else{// code for IE6, IE5
    xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
   }
   xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
     document.getElementById('txtHint').innerHTML=xmlhttp.responseText;
    }
   }
   var searchBy = getSearchBy(document.getElementById('searchBy').value);
   xmlhttp.open('GET','get_hint.php?q='+str+'&searchBy='+searchBy,true);
   xmlhttp.send();
  }

文件'get_hint.php'执行所有处理并查询数据库并将结果作为txtHint元素的innerHTML返回...

当选择'按作者'选项时，getSearchBy函数似乎没有返回'作者'，有什么想法吗？

更新

我知道很多这些答案可能是正确的，但我标记了最快到达的答案。感谢各位的快速回复！

Answer 1

您正在使用select /选项并想要检索所选选项的值。那还没有你的js。应该做这样的事情：

document.getElementById("input[name='searchBy']").value

（尚未测试）

或更动态地，在变化时：

$("input[name='searchBy']").change(function(){
if($(this).is(':selected')){ 
///do something
}

Answer 2

这一行的问题。

document.getElementById('searchBy').value

您正在搜索ID为＆＃39; searchBy＆＃39;的元素。但元素名称是searchBy而不是id。所以请添加一个id =＆＃39; searchBy＆＃39;对于选择元素。并删除id =＆＃39; searchBy＆＃39;来自选项。

<select name='searchBy' id='searchBy' onChange='getSearchBy(this.value)'>
      <option  value='Title' selected>By Title</option>
      <option  value='Author'>By Author</option>
      <option  value='Owner'>By Owner</option>
      <option  value='Reader'>By Reader</option>
     </select>

Answer 3

您的HTML代码中有多个具有相同ID属性的项目。 如果您将标记更改为：

<form method='get' action='/main'>
 <label for='search'>Search</label>
 <div style='position:relative;display:inline;'>
  <input type='text' id='search' name='search' autocomplete='off'/>
  <div style='display:inline;' id='txtHint'></div>
 </div>
 <select id='searchIn' name='searchIn'>
  <option value='current' selected>Current</option>
  <option value='archive'>Archive</option>
  <option value='all'>All</option>
 </select>
 <select id='searchBy' name='searchBy'>
  <option value='Title' selected>By Title</option>
  <option value='Author'>By Author</option>
  <option value='Owner'>By Owner</option>
  <option value='Reader'>By Reader</option>
 </select>
 <input type='submit' class='submit' value='Submit'/>
</form>

并使用jQuery来解决问题：

var searchField = $("#search")
    .on("keyup", function(){
        $.get('get_hint.php', 
            {
                "q": searchField.val(),
                "searchBy": $("#searchBy").val()
            }, 
            function(data){
                $("#txtHint").html(data);
            });     
    });

（问题从jQuery开始，所以我假设，你已将它包含在你的项目中）

提交前Javascript检查表单字段值

HTML

AJAX /使用Javascript

更新

3 个答案: