Ajax PHPライブ検索 - 第2ステップが必要

Question

Ajax PHP MySQLのライブ検索では、基本的にMySQLデータベースから食品アイテムを取り出し、ドロップダウンリストに表示します。ユーザーが検索語句を1行に1つずつ入力するとGoogleでの検索と同じように。

私が必要とするのは、ユーザーが特定の結果アイテムをクリックして開くことができるようにする方法です。クリックしたアイテムのすぐ下に、その特定の食品のさまざまな量のオプションをリストするラジオボタンがいくつかあります項目。ユーザーは、金額オプションを選択して「提出」をクリックして選択内容を保存することができます。

私はPHPとMySQL、HTMLをよく知っていますが、JSは少し難題です。あなたの答えが詳しく記述されていれば感謝します。

1. HTML検索フォーム：：/検索フォームワット同じページ

   <input type="text" size="30" name="food_name" id="q" value="" onkeyup="sendRequest(this.value);" autocomplete="off"/> 
   

2. AJAXコード：

   以下は、私は、この時点で持っているものといくつかのコードスニペットです

   function createRequestObject() { 
   
       var req; 
   
   if(window.XMLHttpRequest){ 
       // Firefox, Safari, Opera... 
       req = new XMLHttpRequest(); 
   } else if(window.ActiveXObject) { 
       // Internet Explorer 5+ 
       req = new ActiveXObject("Microsoft.XMLHTTP"); 
   } else { 
       alert('Problem creating the XMLHttpRequest object'); 
   } 
   
   return req; 
   
   } 
   
   // Make the XMLHttpRequest object 
   var http = createRequestObject(); 
   
   function sendRequest(q) { 
   
   // Open PHP script for requests 
       http.open('get', 'checkfoods.php?q='+q); 
       http.onreadystatechange = handleResponse; 
       http.send(null); 
   
       } 
   
       function handleResponse() { 
   
       if(http.readyState == 4 && http.status == 200){ 
   
       // Text returned FROM the PHP script 
       var response = http.responseText; 
   
       if(response) { 
       // UPDATE ajaxTest content 
       document.getElementById("searchResults").innerHTML = response; 
       } 
   
       } 
   
       } 
   

3. FOOD_DESという名前のテーブルを探してMySQLに持ち込むPHPスクリプト背中食品のドロップダウンリストに移入する結果：

   include 'my-food-dtabase.php'; 
   
       $searchQry = isset($_GET['q']) ? mysql_real_escape_string($_GET['q']) : false; 
   
       if ($searchQry) { 
       $searchString = $_GET['q']; 
   
       $sql = mysql_query("SELECT NDB_No, FdGrp_Cd, Long_Desc FROM FOOD_DES WHERE Long_Desc LIKE '%".$_GET['q']."%' ORDER BY Long_Desc ASC"); 
   
       if($searchString != NULL) { 
   
       while($row = mysql_fetch_assoc($sql)) { 
       echo "<span id=foodlist><a href=calorie-counter-serving.php?NDB_No=".$row['NDB_No'].">".$row['Long_Desc']."</a><br /></span>"; 
   } 
   } 
   
       if(mysql_num_rows($sql) == 0) { 
       echo "<span class=medium_white>Food item not found. Try a different name or keyword.</span>"; 
       } 
       } 
   

Answer 1

これは必ずしも完全な答えが、正しい方向へのポインタではありません。

純粋なJavaScriptよりjQueryを使用することで、時間と労力を大幅に節約できます。また、ステップ2をコードの数行に減らし、Ajax APIが付属しています。ここにはtutorial on its Ajax systemがあります - はるかに簡単です！

jQuery UIは、ユーザーインターフェイスを構築するのに役立つjQueryの優れた拡張機能です。その一部はダイアログウィジェットです。 'Modal form' dialog exampleは、「新しいユーザーを作成」ボタンをクリックしたときに達成しようとしているものと非常に似ていると思います。彼らがどのようにしたのかを見るには、 'ソースの表示'をクリックしてください。

また、手順3でわかるように、クエリをサニタイズしていないので、$ _GET ['q']がクエリ文字列にスローされています。上記の数行を既に定義した$ searchQryに置き換える必要があります。

Answer 2

http://koding.info/2013/07/ajax-search-box-php-mysql-jquery/ 私はWordpressデータベースを使用したデモライブ検索アプリケーションを実装しました。 見てください。 それはあなたを助けるかもしれません。

Answer 3

ここではAjax、PHP、JQueryでできることがあります。これが役に立ったり、あなたにスタートを与えることを願っています。

ここでライブデモとソースコードをご覧ください。

http://purpledesign.in/blog/to-create-a-live-search-like-google/

検索ボックスを作成し、このような入力フィールドかもしれません。

<input type="text" id="search" autocomplete="off"> 

ここで、ユーザーがテキスト領域に入力した内容を聞く必要があります。このために、jquery live（）とkeyupイベントを使用します。すべてのキーアップで、PHPスクリプトを実行するjquery関数 "search"があります。

このようなhtmlがあるとします。入力フィールドと結果を表示するリストがあります。

<div class="icon"></div> 
<input type="text" id="search" autocomplete="off"> 
<ul id="results"></ul> 

は、我々は、入力フィールド上のkeyUpイベントに耳を傾けますと、検索（）関数を呼び出します空でない場合はjQueryのスクリプトを持っています。 search（）関数は、PHPスクリプトを実行し、AJAXを使用して同じページに結果を表示します。

ここにJQueryがあります。

$(document).ready(function() { 

    // Icon Click Focus 
    $('div.icon').click(function(){ 
     $('input#search').focus(); 
    }); 

    //Listen for the event 
     $("input#search").live("keyup", function(e) { 
     // Set Timeout 
     clearTimeout($.data(this, 'timer')); 

     // Set Search String 
     var search_string = $(this).val(); 

     // Do Search 
     if (search_string == '') { 
      $("ul#results").fadeOut(); 
      $('h4#results-text').fadeOut(); 
     }else{ 
      $("ul#results").fadeIn(); 
      $('h4#results-text').fadeIn(); 
      $(this).data('timer', setTimeout(search, 100)); 
     }; 
    }); 


    // Live Search 
    // On Search Submit and Get Results 
    function search() { 
     var query_value = $('input#search').val(); 
     $('b#search-string').html(query_value); 
     if(query_value !== ''){ 
      $.ajax({ 
       type: "POST", 
       url: "search_st.php", 
       data: { query: query_value }, 
       cache: false, 
       success: function(html){ 
        $("ul#results").html(html); 

       } 
      }); 
     }return false;  
    } 



}); 

mysqlデータベースにクエリを実行します。 PHPは、AJAXを使用してHTMLに挿入される結果を返します。ここで結果はhtmlリストに入れられます。

'type'と 'desc'という2つの類似した列名を持つ2つのテーブルanimalとbirdを含むダミーデータベースがあるとします。

//search.php 
    // Credentials 
    $dbhost = "localhost"; 
    $dbname = "live"; 
    $dbuser = "root"; 
    $dbpass = ""; 

    // Connection 
    global $tutorial_db; 

    $tutorial_db = new mysqli(); 
    $tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname); 
    $tutorial_db->set_charset("utf8"); 

    // Check Connection 
    if ($tutorial_db->connect_errno) { 
     printf("Connect failed: %s\n", $tutorial_db->connect_error); 
     exit(); 

    $html = ''; 
    $html .= '<li class="result">'; 
    $html .= '<a target="_blank" href="urlString">'; 
    $html .= '<h3>nameString</h3>'; 
    $html .= '<h4>functionString</h4>'; 
    $html .= '</a>'; 
    $html .= '</li>'; 

    $search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']); 
$search_string = $tutorial_db->real_escape_string($search_string); 

// Check Length More Than One Character 
if (strlen($search_string) >= 1 && $search_string !== ' ') { 
    // Build Query 
    $query = "SELECT * 
    FROM animals 
    WHERE type LIKE '%".$search_string."%' 
    UNION ALL SELECT * 
    FROM birf 
    WHERE type LIKE '%".$search_string."%'" 
    ; 

    $result = $tutorial_db->query($query); 
     while($results = $result->fetch_array()) { 
      $result_array[] = $results; 
     } 

     // Check If We Have Results 
     if (isset($result_array)) { 
      foreach ($result_array as $result) { 

       // Format Output Strings And Hightlight Matches 
       $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']); 
       $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']); 
      $display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8'; 

       // Insert Name 
       $output = str_replace('nameString', $display_name, $html); 

       // Insert Description 
       $output = str_replace('functionString', $display_function, $output); 

       // Insert URL 
       $output = str_replace('urlString', $display_url, $output); 



       // Output 
       echo($output); 
      } 
     }else{ 

      // Format No Results Output 
      $output = str_replace('urlString', 'javascript:void(0);', $html); 
      $output = str_replace('nameString', '<b>No Results Found.</b>', $output); 
      $output = str_replace('functionString', 'Sorry :(', $output); 

      // Output 
      echo($output); 
     } 
    }