2017-02-17 5 views
0

Customer textfield with autocomplete from databasePHP и JQuery - Создать два различные текстовое поле с автозаполнением, имеющими различные списками данных, извлекаемых из базы данных

мне удалось создать один текстовое поле клиента с автозаполнением для отображения клиентов, которые начинаются в тексте набираясь.

index.php для одного текстового поля

   <meta charset="utf-8"> 
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
      <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
      <script> 
      $(function() { 
      $("#customer").autocomplete({ 
       source: "../phpfiles/search.php", 
      }); 
      }); 
      </script> 



     <div class="ui-widget"> 
     <!-- action='./../customer_report_request' --> 
      <form id="customer_report_request" name="customer_report_request" method="post"> 
       <table> 
        <tr> 
         <th colspan='2'>Search Customer</th> 
        </tr> 
        <tr> 
         <td> 
          <label>Customer: </label> 
          <input name="customer" id="customer" value='' required> 
         </td> 
         <td> 
          <label>Submit: </label> 
          <input value="Send" name="send_customer_request" type="submit" id="send_customer_request"> 
         </td> 
        </tr> 
       </table> 
      </form> 
     </div> 

     <?php 
      //Display the list of customer details 
      if(isset($_POST['send_customer_request'])) 
      { 
       include 'db.php'; //connection 

       $query = "SELECT * FROM customer WHERE Company_Name = '".$_POST['customer']."'"; 
       $customer_result = $db->query($query); 
       $count_customer = $customer_result->num_rows; 
       if($count_customer>0) 
       { 
        echo"<div>"; 
        echo "<table>"; 
        echo"<tr>"; 
        echo"<th>Company_Name</th>"; 
        echo"<th>VAT_Registration</th>"; 
        echo"<th>Contact_First_Name</th>"; 
        echo"<th>Contact_Last_Name</th>"; 
        echo"<th>Email</th>"; 
        echo"</tr>"; 

        while ($row = $customer_result->fetch_assoc()) 
        { 
         echo"<tr>"; 
         echo"<td>".$row['Company_Name']."</td>"; 
         echo"<td>".$row['VAT_Registration']."</td>"; 
         echo"<td>".$row['Contact_First_Name']."</td>"; 
         echo"<td>".$row['Contact_Last_Name']."</td>"; 
         echo"<td>".$row['Email']."</td>"; 
         echo"</tr>"; 
        } 
        echo "</table>"; 
        echo"</div>"; 
       } 
       $db->close(); 
      } 

     ?> 

search.php для одного текстового поля

  <?php 
     $dbHost = 'localhost'; 
     $dbUsername = 'bobo'; 
     $dbPassword = 'rodnik'; 
     $dbName = 'training'; 

     //connect with the database 
     $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName); 

     //get search term 
     $searchTerm = $_GET['term']; 

     //get matched data from customer table 

     $query = $db->query("SELECT * FROM customer WHERE Company_Name LIKE '".$searchTerm."%' ORDER BY Company_Name ASC"); //Starts with 


     while ($row = $query->fetch_assoc()) { 
      $data[] = $row['Company_Name']; 
     } 
     //return json data 
     echo json_encode($data); 
     ?> 

Проблема заключается в том, я хочу использовать один файл поиск PHP для удовлетворения других запросы. Например:

  • Если слово набирается в Контактной текстовое поле, запрос будет «SELECT * FROM Контакт ....»
  • Если слово набирается в текстовом поле клиента, запрос будет «ВЫБРАТЬ * ОТ клиента ....»

И index.php, и search.php были изменены для этого.

Модифицированная часть в index.php

Переменная JQuery, был определен имя_компонент. При изменении из файла index.php клиент texfield отправит переменную в файл search.php с использованием метода POST, чтобы его можно было идентифицировать и использовать для запросов.

Текстовое поле контакта может быть либо в том же виде в файле index.php, либо в другом файле php.

   <script> 
       $(function() { 
       $("#customer").autocomplete({ 
        var component_name= "customer"; 

        source: "../phpfiles/search.php", 
        minLength: 1, 
        change: function(event, ui) 
        { 
         $.post("../phpfiles/search.php", data{post_data: component_name}); 
        } 
       }); 
       }); 
      </script> 

Модифицированный search.php

 <?php 
    $dbHost = 'localhost'; 
    $dbUsername = 'bobo'; 
    $dbPassword = 'rodnik'; 
    $dbName = 'training'; 
    //connect with the database 
    $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName); 
    //get search term 
    $searchTerm = $_GET['term']; 
    //get matched data from skills table 

    $query=""; 
    if($_POST['post_data']=="customer") 
    { 

     $query = $db->query("SELECT * FROM customer WHERE Company_Name LIKE '".$searchTerm."%' ORDER BY Company_Name ASC"); //Starts with 
     while ($row = $query->fetch_assoc()) 
     { 
      $data[] = $row['Company_Name']; 
     } 

     //return json data 
     echo json_encode($data); 
    } 


    ?> 

Может кто-нибудь помочь мне достичь этого?

Я использовал эти ссылки для Jquery-Ui и Jquery API частей:

  • api.jquery.com
  • jqueryui.com
+0

Добро пожаловать в Переполнение стека. Используете ли вы это при редактировании результата поиска на вашем index.php? Это немного запутывает то, как вы его представили. Я бы использовал селектор классов для выбора обоих текстовых полей. Затем в вашем «источнике» вы можете определить, какое поле используется и выполнить поиск на основе этого. – Twisty

ответ

0

Это может быть немного сложнее объявление, я надеюсь, помогает. Ваш пример не предоставляет каких-либо примерных данных или схемы для вашей БД, поэтому мне пришлось сделать ряд догадок. Вам нужно будет настроить.

Рассмотрим, если у вас есть различные поля ввода, вы могли бы:

HTML

<div class="ui-widget"> 
    <form id="customer_report_request" name="customer_report_request" method="post"> 
    <table> 
     <tr> 
     <th colspan='2'>Search Customer</th> 
     </tr> 
     <tr> 
     <td> 
      <label>Customer: </label> 
      <input class="entry-field" name="customer" id="customer" value='' required> 
     </td> 
     <td> 
      <label>Submit: </label> 
      <input value="Send" name="send_customer_request" type="submit" id="send_customer_request"> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <label>Contact: </label> 
      <input class="entry-field" name="contact" id="contact" value='' required> 
     </td> 
     <td> 
      <label>Submit: </label> 
      <input value="Send" name="send_customer_request" type="submit" id="send_ccontact_request"> 
     </td> 
     </tr> 
    </table> 
    </form> 
</div> 

JavaScript

$(function() { 
    $(".entry-field").autocomplete({ 
    source: function(req, resp) { 
     // determine which field we're working with 
     var type = $("this").attr("id"); 
     // collect the entry in the field 
     var term = req.term; 
     // Prepare our response array 
     var responses = []; 
     // PErform POST Request to our Search and accept JSON results 
     $.ajax({ 
      url: "../phpfiles/search.php", 
      data: { 
       t: type, 
       q: term 
      }, 
      type: "POST", 
      dataType: "JSON", 
      success: function(results) { 
       $.each(results, function(key, val) { 
       responses.push(val); 
       }); 
      }); resp(responses); 
     }, 
     minLength: 1 
    } 
    }); 

    $("#customer_report_request").submit(function(e) { 
    e.preventDefault(); 
    if ($("#customer").val().length) { 
     // perform POST to a PHP search for that specific customer details 
    } else { 
     // performn a post to a PHP search for that specific contact details 
    } 
    // populate result DIV on page with resulting data from POST 
    }); 
}); 

PHP: search.php

<?php 
$dbHost = 'localhost'; 
$dbUsername = 'bobo'; 
$dbPassword = 'rodnik'; 
$dbName = 'training'; 
//connect with the database 
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName); 
// get search query 
$searchTerm = $_POST['q']; 
// get search type 
$searchType = $_POST['t']; 
//get matched data from customer table 
if($searchType == "customer"){ 
    /* create a prepared statement */ 
    $stmt = $mysqli->prepare("SELECT * FROM customer WHERE Company_Name LIKE '?%'"); 

} else { 
    /* create a prepared statement */ 
    $stmt = $mysqli->prepare("SELECT * FROM customer WHERE Contact_Name LIKE '?%'"); 
} 
/* bind parameters for markers */ 
$stmt->bind_param("s", $searchTerm); 
/* execute query */ 
$stmt->execute(); 
/* instead of bind_result: */ 
$result = $stmt->get_result(); 
while ($row = $results->fetch_assoc()) { 
    if($searchType == "company"){ 
     $data[] = $row['Company_Name']; 
    } else { 
     $data[] = $row['Contact_Name'] 
    } 
} 
//return json data 
header('Content-Type: application/json'); 
echo json_encode($data); 
?> 

Так что происходит много. Начнется с вашего PHP. Он был уязвим для SQL Injection, поэтому я использовал MySQLi Prepare для защиты вещей. Мы ожидаем, что данные будут опубликованы в этом скрипте, и мы ожидаем условий: query и type. Если мы не получим тип, мы можем установить значения по умолчанию. Возможно, вы хотите добавить чек на query, но он должен всегда иметь 1 символ.

Мы получаем эти данные в наш поисковый скрипт, используя метод функции для опции source. Подробнее: http://api.jqueryui.com/autocomplete/#option-source

Функция: Третий вариант, обратный вызов, обеспечивает максимальную гибкость и может быть использован для подключения любого источника данных для автозаполнения. Обратный вызов получает два аргумента:

  • A request объекта, с одним term свойства, которое относится к значению в данный момент вводе текста. Например, если пользователь вводит «новое yo» в поле города, Autocomplete term будет равен «new yo».
  • A response callback, который ожидает один аргумент: данные, предлагаемые пользователю. Эти данные должны быть отфильтрованы на основе предоставленного term и могут быть в любом из форматов, описанных выше, для простых локальных данных. Это важно при предоставлении настраиваемого обратного вызова источника для обработки ошибок во время request. Вы всегда должны вызывать обратный вызов response, даже если вы столкнулись с ошибкой. Это гарантирует, что виджет всегда имеет правильное состояние.

Так с этим, мы можем добавить к нашему $.ajax() вызова и использовать в error обратного вызова. В принципе, мы отправили пустой массив обратно в response.

Итак, мы отправляем запрос на поиск в PHP, мы возвращаем данные массива JSON, мы передаем его в наш собственный массив, чтобы отправить его обратно на response, и пользователь получит список результатов.

Это все еще немного неудобно, и все в порядке, если это то, к чему вы привыкли. Вы можете уменьшить его, а также классифицировать свои результаты. Таким образом, вы можете иметь одно поле поиска. Также как только что-то будет выбрано или поле изменится, вы можете снова использовать AJAX, чтобы вытащить эти данные из другого PHP, который собирает все данные из БД. Это приведет к тому, что вам не придется ждать, пока страница загрузится снова и т. Д.

Я надеюсь, что это ответит на ваш вопрос, и я подозреваю, что он будет повышать и больше. Продолжайте искать, есть много ответов. Иногда легче разбить большую проблему на более мелкие вопросы, чем решать все.

Смежные вопросы