2014-01-23 1 views
6

Я пытаюсь создать функцию автозаполнения в текстовое поле, но результат должен исходить из моей базы данных SQL.Autocomplete Результаты в текстовом поле, основанные на базе SQL

Вот код, который я пытаюсь настроить:
index.php:

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Autocomplete - Default functionality</title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <script> 
      $(function() { 
       var availableTags = [ 
        "autocomplete.php"; ]; 
       $("#tags").autocomplete({ 
        source: availableTags 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div class="ui-widget"> 
      <label for="tags">Tags: </label> 
      <input id="tags"> 
     </div> 
    </body> 
</html> 

EDIT: Я изменил содержание переменной availableTags и превратили его в var availableTags = <?php include('autocomplete.php') ?>;

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

Вот мой autocomplete.php файл:

<?php 

include('conn.php'); 
$sql="SELECT * FROM oldemp"; 
$result = mysqli_query($mysqli,$sql) or die(mysqli_error()); 

while($row=mysqli_fetch_array($result)) 
{ 
echo "'".$row['name']."', "; 
} 
?> 

EDIT: Также изменили содержание цикла в то время и сделал его в

$name=mysqli_real_escape_string($con,$row['name']); 
$json[]=$name; 

Как я могу вставить неправдоподобные слова от autocomplete.php до availableTags переменная?

EDIT/UPDATE: Появляется список, который появляется, когда я набираю текст в текстовом поле, но в нем нет текста. Я знаю, что это выборка, но само слово не отображается в списке.

+0

И вопрос в том, что? – Mattt

+0

Отредактировано сообщение. Вопрос теперь включен в конце. –

+0

Позвольте мне сообщить вам, что серийное редактирование, как правило, неодобрительно. Можно отредактировать сообщение или два изредка и по какой-то причине. Но незначительные формулировки, сделанные в пучках, НЕ являются способ пойти. –

ответ

3

решить мою проблему.

Есть сценарий, как это:

<!-- WITHOUT THESE THREE BELOW, THE AUTOCOMPLETE WILL LOOK UGLY OR WILL NOT WORK AT ALL --> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

<script> 

    $(function() { 
    $("#tags").autocomplete({ 
     source: "autocomplete.php" 
    }); 
    }); 

</script> 

И autocomplete.php (, где мы получим данные для заполнения поля автозаполнения ввода):

<?php 

    include("conn.php"); /* ESTABLISH CONNECTION IN THIS FILE; MAKE SURE THAT IT IS mysqli_* */ 

    $stmt = $con->prepare("SELECT description FROM table"); /* START PREPARED STATEMENT */ 
    $stmt->execute(); /* EXECUTE THE QUERY */ 
    $stmt->bind_result($description); /* BIND THE RESULT TO THIS VARIABLE */ 
    while($stmt->fetch()){ /* FETCH ALL RESULTS */ 
    $description_arr[] = $description; /* STORE EACH RESULT TO THIS VARIABLE IN ARRAY */ 
    } /* END OF WHILE LOOP */ 

    echo json_encode($description_arr); /* ECHO ALL THE RESULTS */ 

?> 
3

Когда строка используется, плагин Autocomplete ожидает, что эта строка укажет на ресурс URL, который будет возвращать данные JSON.

source: "autocomplete.php" 

Поэтому вам необходимо вернуть объект JSON.

$json = false; 
while($row=mysqli_fetch_array($result)) 
{ 
    $json[] = array(
     'name' => $row['name'] 
    ); 
} 
echo json_encode($json); 
+0

Я сделал источник из доступной переменной Tags переменной autocomplete.php, как вы сказали, и использовал объект JSON, но все еще не работает. –

3

Файл autocomplete.php,

include('conn.php'); 
$sql="SELECT * FROM oldemp"; 
$result = mysqli_query($mysqli,$sql) or die(mysqli_error()); 

//Create an array 
$arr = Array(); 
while($row=mysqli_fetch_array($result)) 
{ 
    array_push($arr,$row['name']); 
} 
header('Content-Type: application/json'); 
echo json_encode($arr) 
?> 

Результатом этого будет массив JSON, который может быть использован непосредственно в JavaScript. Следовательно, сценарий будет что-то вроде -

var availableTags = []; 
$.ajax({ 
    url:"autocomplete.php",success:function(result){ 
    availableTags = result 
}}); 
+0

Как и первый ответ, autocomplete.php правильно извлекал данные, но на индексной странице текстовое поле автозаполнения все еще не работает. Спасибо за ответ, хотя –

3

автозаполнения JQuery UI может принимать 3 различных типов значений source option:

  1. массив, содержащий список вещей, которые необходимо заполнить автозаполнение:
  2. A строка содержит URL-адрес скрипта, который фильтрует список и отправляет нам результаты. Плагин примет текст, введенный в него, и отправит его как параметр term в строку запроса, добавленную к URL-адресу, который мы предоставили.
  3. A Функция, которая извлекает данные, а затем вызывает обратный вызов с этими данными.

В исходном коде используется первый массив.

var availableTags = [ 
    "autocomplete.php"; 
]; 

Что это говорит автозаполнение, что строка "autocomplete.php" является единственной в списке вещей, автозаполнение с.

Я думаю, что вы пытаетесь сделать, это вставить его с чем-то вроде этого:

$(function() { 

    var availableTags = [ 
    <?php include("autocomplete.php"); /* include the output of autocomplete as array data */ ?>; 
    ]; 

    $("#tags").autocomplete({ 
    source: availableTags 
    }); 

}); 

Это вероятно, будет работать нормально при условии, что список вещей, которые возвращаются из базы данных всегда будет оставаться коротким. Выполнение этого способа является довольно хрупким, поскольку, поскольку вы просто выталкиваете исходный вывод из PHP в свой JS. Если возвращенные данные содержат ", вам может потребоваться использовать addSlashes, чтобы избежать его правильной работы. Однако вы должны изменить запрос, чтобы вернуть одно поле, а не *, возможно, вам нужно только одно поле в качестве метки в автозаполнении не всей строки.

Лучший подход, особенно если список потенциально может стать очень большим, будет использовать второй метод:

$(function() { 

    var availableTags = "autocomplete.php"; 

    $("#tags").autocomplete({ 
    source: availableTags 
    }); 

}); 

Это потребует от вас внести изменения в серверном скрипт, который захватывая список, чтобы он выполнял фильтрацию. В этом примере используется prepared statement для обеспечения при условии, пользовательские данные в $term не открывает вам до SQL injection:

<?php 

include('conn.php'); 

// when it calls autocomplete.php, jQuery will add a term parameter 
// for us to use in filtering the data we return. The % is appended 
// because we will be using the LIKE operator. 
$term = $_GET['term'] . '%'; 
$output = array(); 

// the ? will be replaced with the value that was passed via the 
// term parameter in the query string 
$sql="SELECT name FROM oldemp WHERE name LIKE ?"; 

$stmt = mysqli_stmt_init($mysqli); 

if (mysqli_stmt_prepare($stmt, $sql)) { 

    // bind the value of $term to ? in the query as a string 
    mysqli_stmt_bind_param($stmt, 's', $term); 

    mysqli_stmt_execute($stmt); 

    // binds $somefield to the single field returned by the query 
    mysqli_stmt_bind_result($stmt, $somefield); 

    // loop through the results and build an array. 
    while (mysqli_stmt_fetch($stmt)) { 
     // because it is bound to the result 
     // $somefield will change on every loop 
     // and have the content of that field from 
     // the current row. 
     $output[] = $somefield; 
    } 

    mysqli_stmt_close($stmt); 
} 

mysqli_close($mysqli); 

// output our results as JSON as jQuery expects 
echo json_encode($output); 

?> 

Это было некоторое время, так как я работал с MySQLi, так что код может потребоваться некоторые настройки, как это не был протестирован.

Было бы неплохо привыкнуть к использованию подготовленных операторов, поскольку при правильном использовании они делают невозможным внедрение SQL. Вместо этого вы можете использовать обычный незаготовленный оператор, избегая каждого элемента, предоставленного пользователем, с помощью mysqli_real_escape_string, прежде чем вставлять его в свой SQL-запрос. Однако, делая это очень подвержен ошибкам. Только нужно забывать о том, чтобы избежать одной вещи, чтобы открыть себя атаками. Большинство из major "hacks" в новейшей истории связаны с неаккуратным кодированием, которое представляет собой уязвимости SQL-инъекций.

Если вы действительно хотите придерживаться препарирования заявление, код будет выглядеть примерно так:

<?php 
    include('conn.php'); 

    $term = $_GET['term']; 
    $term = mysqli_real_escape_string($mysqli, $term); 
    $output = array(); 

    $sql = "SELECT name FROM oldemp WHERE name LIKE '" . $term . "%';"; 

    $result = mysqli_query($mysqli,$sql) or die(mysqli_error()); 

    while($row=mysqli_fetch_array($result)) 
    { 
    $output[] = $row['name']; 
    } 

    mysqli_close($mysqli); 

    // output our results as JSON as jQuery expects 
    echo json_encode($output); 
?> 
+0

Я думаю, что настоящая проблема заключается в том, как получить содержимое autocomplete.php в index.php. И где GET [] должен получить переменную «term»? И я заменил? до $ term в SELECT sql. Спасибо за усилие –

+0

@LoganWayne Поскольку [указывает документацию] (http://api.jqueryui.com/autocomplete/#option-source) 'term' отправляется плагином автозаполнения, он получает текст, который он отправляет с текст, который напечатан в нем. Это очень плохая идея ** просто положить '$ term' в инструкцию SQL без каких-либо экранов, она откроет вам атаки [SQL injection] (https://en.wikipedia.org/wiki/SQL_injection) , Например, если кто-то искал ''; DROP TABLE oldemp'. Если вы не собираетесь использовать подготовленный оператор, по крайней мере используйте 'mysqli_real_escape_string' в' $ term', прежде чем вы поместите его в инструкцию SQL! –

+0

Спасибо за этот совет. И теперь я получаю точку, откуда приходит термин. И да, я использовал mysqli_real_escape_string в $ term перед тем, как поместить его в оператор SQL. Но все еще не работает. –

0

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

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

Итак, я просто encpsulated весь автозаполнения сценарий с, если заявление ... вот так ...

<?php 

if(!empty($_GET['term'])) 
{ 
include('conn.php'); 

$term = $_GET['term']; 
$term = mysqli_real_escape_string($mysqli, $term); 
$output = array(); 

$sql = "SELECT name FROM oldemp WHERE name LIKE '" . $term . "%';"; 

$result = mysqli_query($mysqli,$sql) or die(mysqli_error()); 

while($row=mysqli_fetch_array($result)) 
{ 
$output[] = $row['name']; 
} 

mysqli_close($mysqli); 

// output our results as JSON as jQuery expects 
echo json_encode($output); 
} 
?> 

... и теперь мой сервер возвращается в нормальное русло.