ProfiPHPProfiPHP
Категория: Полезное в PHP

Подтягивание вариантов значений текстового поля Input в зависимости от введенных данных

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

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

Перейдем к практической реализации.

Для начала необходимо подключить библиотеку Jquery:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
Форма будет выглядеть следующим образом:
<div id="input_container">
<input type="text" id="search" autocomplete="off" />
<ul id="search_list"></ul>
</div>
Соответственно таблица стилей:
#input_container{ height: 30px; float: left }
#input_container input{ padding: 3px; border: 1px solid #cccccc; border-radius: 0 }
#input_container ul{ margin: 0; padding: 0; min-width: 300px; max-width: 505px; max-hei1ght: 300px; border: 1px solid #CCCCCC; position: absolute; z-index: 9; background: #fff; list-style: none; border-top: 0px }
#input_container ul li{ padding: 5px; font-size: 14px }
#input_container ul li:hover{ background: #F2F2F2 }
#search_list{ display: none }
Код JS:
<script type="text/javascript">
$(document).ready( function(e)
{
$('#search').on('input',function( ){
search = $('#search').val( );
if ( search.length > 3 )
{
$.ajax({
type: "POST",
url: "select_search_list.php",
data: { "search": search },
success: function( data ) {
if ( data.length > 1 ) {
$('#search_list').show( ).html( data );
}
}
});
}
});
});
function set_item( item ) {
$('#search').val( item );
$('#search_list').hide( );
}
</script>
Код исполняемого файла select_search_list.php:
<?php
if ( isset( $_POST['search'] ) )
{
$search = $db->safesql( trim( strval( $_POST['search'] ) ) );
if ( mb_strlen( $search ) > 3 )
{
$db->query( "SELECT DISTINCT `title` FROM `tablename` WHERE ( `title` LIKE '%{$search}%' ) LIMIT 10");
while ( $row = $db->get_row( ) ) {
echo '<li onClick="set_item(\''.htmlspecialchars( $row['title'], ENT_QUOTES ).'\')">'.htmlspecialchars( $row['title'], ENT_QUOTES ).'</li>';
}
}
}
?>
А теперь опишу все по порядку.

По событию набора букв в текстовое поле, будет срабатывать JS код, и когда букв будет больше 3, результат передастся файлу select_search_list.php, который выполнит выборку из базы похожих вариантов. При нажатии на любой с вариантов, будет выполнена функция Set_item, которая вставит результат в текстовое поле.

Файл select_search_list.php представляет собой лишь пример выборки а не полностью работоспособный код, поэтому вам необходимо самим реализовать свой вариант поиска нужных значений.

Добавить комментарий

Имя:
Текст комментария: