Форум

Rio · #1 (**permalink**) 14.02.2016, 14:18

Здравствуйте, уважаемые форумчане.
Осваиваю 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));
		}
	}

Благодарю, что уделяете время моему вопросу.

laimas · #2 (**permalink**) 14.02.2016, 15:15

Сообщение от Rio

В качестве решения предположил, что можно воспользоваться ещё раз методом автокомплит, запускаемым событием onclick, но с поиском значения в БД по выбранному id и выводом уже полной строки sql.

Это будет выборка по конкретному условию одной записи, к автокомплит это отношения не имеет.

Rio · #3 (**permalink**) 14.02.2016, 15:33

как тогда реализовать выборку по конкретному условию одной записи без перезагрузки страницы на основе результатов автокомплита?

laimas · #4 (**permalink**) 14.02.2016, 16:30

Автокомплит, а вообще есть русское более правильное название этому - живой поиск. Пусть результатом вашего поиска пусть будет таблица, а не куча таблиц, если не список:

//если 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();
}

Rio · #5 (**permalink**) 14.02.2016, 18:44

Уважаемый laimas, благодарю вас за помощь и детальное пояснение.
Спасибо!

Форум

Справочник

Discord чат

Курсы javascript