Автозаполнение формы в PHP / Javascript

Question

Автозаполнение формы в PHP / Javascript

Я пытался сделать сценарий автозаполнения в течение всего дня, но я не могу понять это.

<form method="POST">
<input type="number" id="firstfield">

<input type="text" id="text_first">
<input type="text" id="text_sec">
<input type="text" id="text_third">

</form>

Это мой HTML.
что я пытаюсь сделать, это использовать ajax для автозаполнения первого поля
как это: предварительный просмотр

и когда в первом входе 9 чисел, он заполняет и другие входные данные правильными связанными данными

скрипт на ajax.php отправляет mysqli_query на сервер и запрашивает все
данные (таблица: поля || строки: число, первое, секунда, третье)

0

ajax autocomplete javascript mysqli php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

https://github.com/ivaynberg/select2

Пример интеграции с PHP:

<?php
/* add your db connector in bootstrap.php */
require 'bootstrap.php';

/*
$('#categories').select2({
placeholder: 'Search for a category',
ajax: {
url: "/ajax/select2_sample.php",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
term: term, //search term
page_limit: 10 // page size
};
},
results: function (data, page) {
return { results: data.results };
}

},
initSelection: function(element, callback) {
return $.getJSON("/ajax/select2_sample.php?id=" + (element.val()), null, function(data) {

return callback(data);

});
}

});
*/

$row = array();
$return_arr = array();
$row_array = array();

if((isset($_GET['term']) && strlen($_GET['term']) > 0) || (isset($_GET['id']) &&      is_numeric($_GET['id'])))
{

if(isset($_GET['term']))
{
$getVar = $db->real_escape_string($_GET['term']);
$whereClause =  " label LIKE '%" . $getVar ."%' ";
}
elseif(isset($_GET['id']))
{
$whereClause =  " categoryId = $getVar ";
}
/* limit with page_limit get */

$limit = intval($_GET['page_limit']);

$sql = "SELECT id, text FROM mytable WHERE $whereClause ORDER BY text LIMIT $limit";

/** @var $result MySQLi_result */
$result = $db->query($sql);

if($result->num_rows > 0)
{

while($row = $result->fetch_array())
{
$row_array['id'] = $row['id'];
$row_array['text'] = utf8_encode($row['text']);
array_push($return_arr,$row_array);
}

}
}
else
{
$row_array['id'] = 0;
$row_array['text'] = utf8_encode('Start Typing....');
array_push($return_arr,$row_array);
}

$ret = array();
/* this is the return for a single result needed by select2 for initSelection */
if(isset($_GET['id']))
{
$ret = $row_array;
}
/* this is the return for a multiple results needed by select2
* Your results in select2 options needs to be data.result
*/
else
{
$ret['results'] = $return_arr;
}
echo json_encode($ret);

$db->close();

Устаревшая версия:
В моем примере я использую старый проект Yii, но вы можете легко отредактировать его под свои требования.

Запрос кодируется в формате JSON. (Вам не нужно YII для этого, хотя)

public function actionSearchUser($query) {
$this->check();
if ($query === '' || strlen($query) < 3) {
echo CJSON::encode(array('id' => -1));
} else {
$users = User::model()->findAll(array('order' => 'userID',
'condition' => 'username LIKE :username',
'limit' => '5',
'params' => array(':username' => $query . '%')
));
$data = array();
foreach ($users as $user) {
$data[] = array(
'id' => $user->userID,
'text' => $user->username,
);
}
echo CJSON::encode($data);
}

Yii::app()->end();
}

Используя это в представлении:

$this->widget('ext.ESelect2.ESelect2', array(
'name' => 'userID',
'options' => array(
'minimumInputLength' => '3',
'width' => '348px',
'placeholder' => 'Select Person',
'ajax' => array(
'url' => Yii::app()->controller->createUrl('API/searchUser'),
'dataType' => 'json',
'data' => 'js:function(term, page) { return {q: term }; }',
'results' => 'js:function(data) { return {results: data}; }',
),
),

));

Следующий скрипт взят из официальной документации, может быть проще принять:

$("#e6").select2({
placeholder: {title: "Search for a movie", id: ""},
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
data: function (term, page) {
return {
q: term, // search term
page_limit: 10,
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data.movies};
}
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection  // omitted for brevity, see the source of this page
});

Это может быть найдено здесь: http://ivaynberg.github.io/select2/select-2.1.html

Вы можете получить копию select2 в репозитории github выше.

0