повторный autocomplete
Здравствуйте, уважаемые форумчане.
Осваиваю javascript и программирование в целом. Столкнулся со следующей задачей: при выводе автокомплитом списка из БД необходимо реализовать функцию просмотра полной строки при нажатии на один из результатов выдачи, без перезагрузки страницы. В приведенном ниже коде в автокомплите выводятся только id, тайтл и теги страниц; выводить всё содержимое строки для просмотра при количестве строк более 50 посчитал нерациональным способом (загружать страницу большим объёмом данных). В качестве решения предположил, что можно воспользоваться ещё раз методом автокомплит, запускаемым событием onclick, но с поиском значения в БД по выбранному id и выводом уже полной строки sql. Т.е. результаты первого поиска автокомплита остаются на странице, а второй поиск поочерёдно выводит данные в отдельный блок при нажатии на одну из строк-результатов первого поиска. Вопрос: как передать переменную (id) выбранной строки в другой обработчик автокомплита (в другую форму на index.php).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style type="text/css">@import url("style.css");</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#query").keyup(function(){
var numChars = $(this).val().length;
if (numChars>=3){
var queryString = $(this).val();
$.post(
"search.php",
{
queryString: queryString
},
function(data){
if (data !=""){
$("#autocomplete").show();
$("#autocomplete").html(data);
}
else{
$("#autocomplete").show();
$("#autocomplete").html("<i>Нет результатов по введеному запросу)</i>");
}
}
);
}else if (numChars<3){
$("#autocomplete").hide();
} else if(numChars == 0){
$("#autocomplete").html("");
}
});
});
</script>
</head>
<body>
<input type="text" placeholder="Поиск" id="query" />
<div id="autocomplete"></div>
<div id="onclickautocomplete"></div><!--предполагаемый блок вывода второго автокомплита-->
</body>
</html>
Обработчик файла search.php
if(isset($_POST["queryString"])){
$connect = mysql_connect("localhost", "root", "");
mysql_select_db("testtwo");
mysql_query("SET NAMES cp1251");
$string = iconv("UTF-8","cp1251",$_POST["queryString"]);
$query = mysql_query("SELECT id,newtegs,title FROM dataz WHERE title LIKE '%$string%' ") or die (mysql_error());
if($myrow = mysql_num_rows($query) > 0){
$myrow = mysql_fetch_array($query);
do{
echo '<br>' .
"<table id='table'><tr><a href='#'>
<td id='id'>".$myrow[id]."</td>",
"<td id='newtegs'>".$myrow[newtegs] ."</td>",
"<td id='title'>".$myrow[title]."</td>
</a></tr></table>";
}
while ($myrow = mysql_fetch_array($query));
}
}
Благодарю, что уделяете время моему вопросу. |
Цитата:
|
как тогда реализовать выборку по конкретному условию одной записи без перезагрузки страницы на основе результатов автокомплита?
|
Автокомплит, а вообще есть русское более правильное название этому - живой поиск. Пусть результатом вашего поиска пусть будет таблица, а не куча таблиц, если не список:
//если search.php обрабатывает только ajax запросы, то условие if(isset($_POST["queryString"])){ } убрать
//здесь уж тогда нужна проверка наличия запроса со своей страницы
//после соединения выполнять выполнение определяемое ключом запроса, можно switch, можно и if()
switch(key($_POST)) {
case 'queryString': $string = addCslashes(iconv("UTF-8", "cp1251", mysql_real_escape_string($_POST["queryString"])), '\%_'); //перереводите базу в utf
$query = mysql_query("SELECT id,newtegs,title FROM dataz WHERE title LIKE '%$string%' ") or die ( 'Ошибка базы данных'); //нельзя вываливать ошибки SQL клиенту
if(mysql_num_rows($query)) {
//цикл do ... while увиденный в каком-то мультике здесь совсем не нужен
$t = '<table id="table">';
while($row = mysql_fetch_object($query)) $t .= '<tr data-ids="'.$row->id.'"><td>'.$row->id.'</td><td>'
.htmlspecialchars($row->newtegs).'</td><td>'
.htmlspecialchars($row->title).'</td></tr>';
exit($t . '</table>');
}
break;
case 'id': if($id = (int)$_POST['id']) {
//запрос на выборку записи по id
}
}
$myrow[newtegs] - то, что так работает, не означает, что так можно писать. Просто вашу ошибку РНР исправит сам, правильно $myrow['newtegs']. На клиенте при получении списка по поиску, можно так:
function(data){
if(!!data) {
$("#autocomplete").html(data)
.show()
.find('table')
.on('click', 'tr', function() {
$.post("search.php", {id : $(this).data('ids')}, function(data) {
//получение полной запрошенной записи
})
})
} else $("#autocomplete").html("<i>Нет результатов по введеному запросу)</i>").show();
}
|
Уважаемый laimas, благодарю вас за помощь и детальное пояснение.
Спасибо! |
| Часовой пояс GMT +3, время: 09:24. |