1 февраля 2013 в 11:09
Воюю с JQuery. Уже и get() прикрутил, и autocomplete в простейшем варианте не пугает... А вот на наиболее полной функции ajax() мозг коротнуло! 
А нужно мне организовать autocomplete для поля. Но не простой, а чтобы кидал в подсказке результат склейки нескольких полей из результата запроса, а при выборе замещал одним из результатов выборки написанное в поле.
А теперь ближе к баранам. На сервер передаем два параметра. Серверная часть отрабатывает запрос с параметрами и возвращает выборку в виде ассоциативного массива JSON. По идее я должен подхватить данные, передать в функцию обработки, которая и вернет нужные строки для автозавершения в поле - склеит поля, и все такое... Так вот не выходит!
Еще ближе к баранам. Ай! бодается сволочь... Код. Сервак.
<?php
/* Connection vars here for example only. Consider a more secure method. */
$dbhost = 'localhost';
$dbuser = 'name';
$dbpass = 'password';
$dbname = 'base_name';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
/* Переводим русские названия из базы в правильную кодировку */
mysql_query('SET NAMES utf8');
mysql_select_db($dbname);
$return_arr = array();
/* If connection to database, run sql statement. */
if ($conn)
{
$fetch = mysql_query("SELECT uli.nn, dom.a_dom, ls.n_kv, ls.fam, ls.im, ls.ot FROM ls, uli, dom WHERE (uli.n_uli = ls.n_uli)AND(dom.n_dom = ls.n_dom)AND(dom.n_uli = uli.n_uli)AND(dom.n_ges = ".mysql_real_escape_string($_GET['zhr']).")AND(ls.n_ges = ".mysql_real_escape_string($_GET['zhr']).")AND(uli.n_ges = ".mysql_real_escape_string($_GET['zhr']).")AND(ls.n_ls =".mysql_real_escape_string($_GET['ls']).");");
/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['nn'] = $row['nn'];
$row_array['a_dom'] = $row['a_dom'];
$row_array['n_kv'] = $row['n_kv'];
$row_array['fam'] = $row['fam'];
$row_array['it'] = $row['im'];
$row_array['ot'] = $row['ot'];
array_push($return_arr,$row_array);
}
}
/* Free connection resources. */
mysql_close($conn);
/* Toss back results as json encoded array. */
echo json_encode($return_arr);
?>По идее я получил многомерный массив с нужными данными в формате JSON и должен радоваться. Идем к потребителю...
Код. Клиент.
$(function() {
$("#edit-submitted-ls-").autocomplete({
source: function(request,response) {
$.ajax({
url: "http://my_site.com/getdata.php",
dataType: "array",
data: {
name_startsWith: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.ls + ", " + fio,
value: item.ls + " (" + item.fio + ")"
}
}));
}
});
},
minLength: 3,
select: function(event,ui) {
$("<p/>").text(ui.item ? ui.item.value : "Ничего не выбрано!").prependTo("#log");
}
});
});
</script>
Вот тут я уже крупно лажаю... Ничего не работает. Предположительно пользователь вводит в поле #edit-submitted-ls- часть фамилии и получает выпадающий список подсказок в формате Лицевой - Фамилия. Это я еще упростил себе задачу, гораздо наглядней здесь на ввод части фамилии получить из массива n_ls + nn + a_dom + n_kv и потом подставить в #edit-submitted-ls- выбранный n_ls
Может кто-то делал похожую штуку? Запутался совсем...
Комментарии
Если хотите досконально разобраться самостоятельно то сделайте тестовый пример без подключения к базе и выложите здесь, вам помогут. Для отладки прямо так глядите в консоль разработчика браузера там и ошибки js и запросы на сервер и ответы с него.
Хм... К стыду своему, такая консолька прошла мимо меня. И где она в Chrome?
Нажал Ctrl+Shift+J, нашел консольку, и уже часа три в отладке.
Откуда это:
если это:
?
И потом, тэг стоит Drupal 7, зачем такие извращения с базой?
Вот очень просто и доходчиво описан процесс Using jQuery to communicate to Drupal 7 via AJAX
Вот документация к autocomplete Autocomplete Widget
Вот кусок кода js:
$input.autocomplete({
source: function(request, response) {
$.ajax({
url: Drupal.settings.basePath + "ajax/autocomplete",
type: 'post',
data: {
input: request.term,
maxItems: 12
},
success: function(data) {
response($.map(data, function(item) {
return {
value: item.nid,
label: item.title
}
}));
}
});
},
minLength: 2,
focus: function(event, ui) {
// $input.val(ui.item.label);
return false;
},
select: function(event, ui) {
$('#jq-example-selected-nid').val(ui.item ? ui.item.value : 0)
$input.val(ui.item ? ui.item.label : this.value);
return false;
},
open: function() {
$input.removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$input.removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
Вот серверная часть к нему:
* Обработка запроса на автозавершение ввода.
*/
function jq_example_ajax_autocomplete() {
// Запрашиваем данные из бд.
// fetchAll даст нам список объектов с выбранными полями таблицы в качестве свойств.
$select = db_select('node', 'n')
->fields('n', array('nid', 'title'))
->condition('n.title', '%' . db_like($_POST['input']) . '%', 'LIKE')
->range(0, $_POST['maxItems'])
->execute()->fetchAll();
// и отправляем результат.
drupal_json_output($select);
// Больше нам ничего не нужно.
drupal_exit();
}
Тоже этим занимаюсь.
Модифицирую autocomplete_deluxe под свои задачи.
Посмотрите как он сделан.
И еще более простой пример.