0

私のサイトには、本のデータベースを検索するための検索ボックスがあります。次のオプションがユーザーに表示されます。

  • 検索クエリ（テキスト入力フィールド）
  • 検索する場所（現在、アーカイブ、またはすべてのオプションを含む選択フィールド）
  • 検索対象（タイトル、著者、所有者、または読者のオプションを含む選択フィールド）

ユーザーが検索フィールドに入力を入力すると、検索時に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関数は「作成者」を返さないようです。何かアイデアはありますか？

アップデート

これらの答えの多くが正しいかもしれないことを私は知っていますが、私は最も早く到着したものを正しくマークしました。皆様からの迅速な対応に感謝します！

4

3 に答える 3

1

この行の問題。

document.getElementById('searchBy').value

ID「searchBy」の要素を検索しています。しかし、要素名はidではなくsearchByです。そのため、select 要素に id='searchBy' を追加してください。オプションから id='searchBy' を削除します。

<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>
于 2012-08-20T08:41:30.767 に答える
0

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で始まるので、すでにプロジェクトに含めていると思います）

于 2012-08-20T08:48:13.840 に答える
0

選択/オプションを使用していて、選択したオプションの値を取得したい。それはあなたのjsにはまだありません。あなたはこのようなことをする必要があります:

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

(まだテストされていません)

またはより動的に、変更時に:

$("input[name='searchBy']").change(function(){
if($(this).is(':selected')){ 
///do something
}});
于 2012-08-20T08:36:42.033 に答える