Ajax PHP Live Search - требуется второй шаг

Question

У меня есть прямой поиск в формате Ajax PHP MySQL, который в основном вытаскивает элементы питания из базы данных MySQL и представляет их в раскрывающемся списке, так как пользователи вводят в них поисковый запрос, по одному элементу на строку , так же, как поиск в 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. PHP-скрипт, который смотрит в таблицу FOOD_DES в MySQL и приносит раздвинуть результаты населяющих выпадающий список продуктов:

   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

Это не обязательно полный ответ, но указатель в правильном направлении.

Вы сэкономите время и усилия, используя jQuery поверх чистого JavaScript. Это также уменьшит ваш шаг 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.На каждом keyup мы имеем функцию поиска jquery, которая будет запускать php-скрипт.

Предположим, у нас есть html, как это. У нас есть поле ввода и список для отображения результатов.

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

У нас есть скрипт Jquery, который будет прослушивать события KeyUp на поле ввода, и если оно не пусто будет вызывать функцию поиска(). Функция 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;  
    } 



}); 

В php, сделайте запрос к базе данных mysql. Php вернет результаты, которые будут помещены в html с использованием AJAX. Здесь результат помещается в список html.

Предположим, что есть фиктивная база данных, содержащая две таблицы животных и птиц с двумя похожими названиями столбцов «тип» и «по убыванию».

//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); 
     } 
    }