Drupal: ajax-автодополнение поиска
Date January 3rd, 2012 Author Vitaly Agapov
Правда иной раз гнётся, но никогда не ломается и всплывает поверх лжи, как масло — поверх воды.
Как-то раз я уже писал про Ajax-автозаполнение (Ajax-autosuggest) своими силами. Там в комментариях было много возмущения из-за того, что никак не была рассмотрена серверная часть решения. Причины, по которым я о ней не писал, ясны: это абсолютное разнообразие возможных серверных решений. Например, мой Perl’овый cgi-скрипт никак не прояснил бы ситуацию человеку, работающему с PHP. А пример с серверной частью в виде модуля для Drupal совсем не поможет адепту Joomla. Но теперь моя совесть будет совсем чиста, так как я всё-таки опишу, как самостоятельно и с наименьшими трудозатратами сделать автодополнение для стандартного поиска в Drupal 7.
Конечно же, можно использовать любой модуль из целой россыпи соответствующих расширений для Drupal: Finder, AutoSuggest Search и многих других. Но тут либо нет портированной версии для Drupal 7.x, либо в модуле нет нужной нам функциональности, либо он работает не совсем так, как мы хотим, либо просто у нас чешутся руки. В общем, хотим сделать по-своему. Хотя стоит отметить, что Finder очень и очень хорош.
Подготовительный этап
Для начала нам нужен div, в который будет выводиться результат поиска. Его можно добавить хуком hook_block_view(), можно сделать свой шаблон search-block-form.tpl.php, можно добавить объект с помощью javascript, или самое простое – добавить этот div прямо в свой шаблон page.tpl.php. В общем, добавляем в разметку страницы:
<div id=”ajaxsearchresult” style=”display:none;”>
Создание View
Можно, конечно, из своего модуля обращаться к базе напрямую и выбирать нужные нам значения по нужному нам фильтру, но мы договорились делать всё наиболее простым способом. Поэтому модуль Views – наш выбор. Его обвиняют в тяжести и медлительности, но зато он умеет делать всё, что нам может потребоваться для выборки результатов, и даже больше.
Наш view мы назовём ajaxfinder. Создадим путь к нему /ajaxfinder. Формат – таблица.
Список полей – по своему усмотрению. Так как в моём случае Drupal работает с модулем Ubercart, то и набор полей соответствующий: изображение стиля uc_thumbnail (со значением “Display 1 value” в блоке “Multiple Field Settings”, чтобы выводить только одно изображение, если у ноды их несколько), заголовок и стоимость для продажи.
Фильтр – по опубликованным товарам и по самому главному критерию, заголовку.В свойствах фильтра по заголовку надо разрешить изменение критерия (Expose this filter to visitors) и указать оператор Contains или Starts With. Так мы сможем выбирать нужные ноды, указывая значение фильтра как атрибут запроса к странице. Имя атрибута будет соответствовать значению поля Filter identifier. В моём случае это title.
На данном этапе после сохранения View на странице mysitename.ru/ajaxfinder?title=test должны выводиться соответствующие ноды в соответствующем табличном виде.
Создание модуля
Всё остальное будет делать модуль. Назовём его ajaxsearch. В нём будут всего три файла: ajaxsearch.info, ajaxsearch.module и ajaxsearch.js. Если что, то положить их надо будет в директории ajaxsearch в sites/all/modules/.
ajaxsearch.info
name = "AJAX Search" description = "AJAX autosuggest for products" core = 7.x files[] = ajaxsearch.module scripts[] = ajaxsearch.js
ajaxsearch.module
<?php
/**
* Implements hook_menu().
*/
function ajaxsearch_menu() {
$items = array();
$items['ajaxsearch/getblock'] = array(
'page callback' => 'ajaxsearch_get_block',
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);
return $items;
}
function ajaxsearch_get_block( $s = '' ) {
$viewName='ajaxfinder';
$displayId='default';
$view = views_get_view($viewName);
$view->set_display($displayId);
$view->set_exposed_input(array('title' => $s));
$view->execute();
$res = $view->preview();
return drupal_json_output(array('products'=>$res));
exit;
}
?>
Здесь реализация hook_menu создаёт адрес ajaxsearch/getblock, контекстные аргументы которой передаются в callback-функцию ajaxsearch_get_block. Эта функция уже получает View и отдаёт его в JSON-формате.
ajaxsearch.js
var suggest_count = 0;
Drupal.behaviors.ajaxsearch = {
attach: function(context) {
jQuery('*:not(#ajaxsearchresult)').click(function() {
jQuery('#ajaxsearchresult', context).fadeOut();
});
jQuery('#ajaxsearchresult tr').click(function() {
document.location = jQuery(this).find('a').attr('href');
});
jQuery('#block-search-form input', context).bind('keyup', function() {
var s = jQuery(this).val();
suggest_count++;
setTimeout("searchGo("+suggest_count+")",300);
});
}
};
function searchGo(count) {
if ( count == suggest_count ) {
var s = jQuery('#block-search-form input').val();
if (! s) { jQuery('#ajaxsearchresult').hide(); return; }
var updateBlock = function(data) {
jQuery('#ajaxsearchresult').html(data.products);
if ( jQuery('#ajaxsearchresult .view-content').length > 0 )
jQuery("#ajaxsearchresult").show();
else jQuery("#ajaxsearchresult").hide();
Drupal.attachBehaviors('#ajaxsearchresult');
}
jQuery.ajax({
type: 'POST',
url: '/ajaxsearch/getblock/'+s,
success: updateBlock,
dataType: 'json',
data: 'js=1'
});
}
}
Это очень упрощённый для наглядности вариант скрипта с минимумом необходимой функциональности. При желании сделать полноценное решение можно обратиться к вышеупомянутой статье Ajax-автозаполнение (Ajax-autosuggest) своими силами.
Здесь же к объекту ‘#block-search-form input’ привязывается обработчик нажатия клавиш. Он ждёт 300 мс и, если новых нажатий за это время не было, то функция searchGo отправляет POST-запрос к нашей странице /ajaxsearch/getblock/ с соответствующим контекстным аргументом. Возвращаемое значение присваивается объекту ‘#ajaxsearchresult’, после чего тот отображается jQuery-методом show.
Не забыта необходимость закрыть всплывающее окно при клике в любую часть страницы и необходимость сделать переход на страницу ноды при клике на любую часть строки таблицы.
CSS
Само собой, надо стилизовать всплывающее окно. Тут полная свобода творчества, но две вещи обязательны:
Надо задать позиционирование блока:
#ajaxsearchresult { position: absolute; z-index:100; }
И спрятать форму для ручного ввода значения фильтра:
#ajaxsearchresult .view-filters { display: none; }
Конец
На этом всё. Отдыхаем, пьём морс.
Посмотреть рабочий вариант можно по адресу reactive-shop.ru.
Tags: Drupal, jQuery, PHP
Category:
Drupal |
23 Comments »
21 November 2012 - 19:33
Спасибо за статью.Очень полезная вещь, пригодится для любого магазина, фильтр в правой колонке магазина тоже понравился)
10 February 2013 - 21:57
А можно узнать как реализован поиск по части слова на reactive-shop.ru?
11 February 2013 - 9:04
Когда мы настраивали в нашем view критерии фильтра, то указали оператор “Contains”, который подразумевает поиск по части слова.
9 February 2014 - 12:37
По идее это ведь можно реализовать с помощью обычного поиска с подгрузкой результатов по ajax. Только блок с результатами позиционировать абсолютно относительнhttp://sweetcaptcha.s3.amazonaws.com/widget/v2/upload/answer_121.pngо формы поиска
28 August 2014 - 22:44
А как сделать чтобы курсор после всплывания результатов поиска не исчезал, а оставался в поле поиска?
15 August 2020 - 16:44
i was reading this https://1xslots-africa.site
27 July 2024 - 15:05
The lamb could have poor train tolerance by way of the umbilical region which shall be apparent. Results: All histopathologic criteria confirmed a statistically important distinction between continual tonsillitis and continual adenotonsillar hypertrophy (p=zero. Also, small pseudocysts usually do not need to be drained and pseudocysts of the pancreas commonly resolve spontaneously himalaya herbals 52 order geriforte toronto.
27 July 2024 - 15:28
Hereditary hemorrhagic telangiectasia or Osler the differential prognosis contains Addison’s dis Rendu-Weber illness is inherited as an auto ease, Albright’s syndrome, Gardner’s syndrome, somal dominant trait. In reality, the affected person is amazed with the prompt efficacy of the treatment rendered. Patients nearing death may experience terminal delirium, Grief and Bereavement which incorporates day/night reversals, agitation, restlessness, and Supportive preparation before the dying will ease the familyпїЅs moaning/groaning existential depression test anafranil 25 mg purchase without a prescription.
27 July 2024 - 15:47
An exception is that empirical antifungal remedy shouldn’t be allowed onto the ward the place sufferers remedy should be started after 4–7 days of fever that does not with neutropenia are housed. Immune-deficient rodents could be especially useful However, a whole understanding of the organic to assess human cell transplantation outcomes, mechanisms at work after stem cell transplantation just isn’t a prerequisite to initiating trials, especially when engraftment in vivo, stability of differentiated cells, and most cancers risk. Borderline patients hibits bacterial transpeptidase and cell wall show instability in relationships, self-image, synthesis allergy medicine ok while nursing aristocort 10 mg purchase mastercard.
27 July 2024 - 16:15
The Patients (program eligibility, types of comply with-up services) Please refer to the MedsCheck Annual medicine evaluate process for fundamental info together with suggestions for pharmacists, the worth of professional providers and key messages that apply to all MedsCheck evaluations. We can calculate a regression equation for any two steady variables, so it is attainable to give you an equation even if the end result just isn’t in reality associated to the explanatory variable. The passage of meconium in an asphyxiated infant < 34 weeks' gestation is uncommon medications not to take after gastric bypass buy cheap ropinirole 2 mg online.
27 July 2024 - 16:24
In contrast, the dorsolateral system descends in the corticospinal tract terminals project on spinal interneurons. Achievable objectives corresponding to 5% to 10% weight loss in those with excess weight yields signifcant medical enhancements and is considered profitable weight discount inside six months. You will shine the full strength of the penlight directly into the topic’s eye for at least 15 seconds treatment for scabies pepcid 20 mg buy low cost.
27 July 2024 - 16:54
Along with chromosomal cross-over, this process aids in growing genetic range by producing novel genetic combinations. There are various kinds of Thyroiditis and every sort has its own treatment regime. Oxidative Stress and Antioxidative Status in the Acute Pancreatitis 119 Damage to the alveolar cells ensuing from the inflammatory means of the pancreas, can also happen if the bacterial infection of gall coexists with choledocholithiasis treatment bee sting purchase 1 mg ropinirole with amex.
27 July 2024 - 16:55
Nurses should function demonstrated that extra signiп¬Ѓcant decreases in the absolute energetic individuals in addition to leaders in research to generate neutrophil rely, without an infection, correlated with decreased evidence when it’s lacking. Student will inform trainer Student will identify or grownup when having motivators and Keep correct information of symptoms of excessive or low diabetes management limitations to self care. Methimazole interferes with thyroid perform mainly by inhibition of thy-roidal natural binding and coupling reactions herbals products proven geriforte 100 mg.
27 July 2024 - 17:43
Seizures often are handled with phenobarbi neonatal hypocalcemia associated with asphyxia. Where infammation of the liver lasts longer than six months, the situation is called persistent hepatitis. The Manual Staining System (12 Wells) includes one (1) Stainless this is the way it works muscle relaxant menstrual cramps buy 100 mg tegretol mastercard.
27 July 2024 - 18:19
In the early levels, iron is present in periportal hepatocytes, particularly in lysosomes. Gut 2014;63: hundred and fifty] Fuchssteiner H, Nigl K, Mayer A, Kristensen B, Platzer R, Brunner B, et al. We now have questionnaires to establish the ability and personality traits of adults with AspergerпїЅs syndrome, and the evaluation of the responses and scores on these questionnaires could be extremely useful for the clinician treatment 32 500 mg divalproex order with visa.
27 July 2024 - 19:15
It is frequent to see a persistent symptom pattern with What occurs to your pain Does the pain worsen at nightfi. Praha: Vyskumny ustav potravinarsky, 1992, Determination of the total solids content material (reference technique). Fluoride has a topical action on the tooth by being included into the molecular construction as fluorapatite medicine world nashua nh order oxytrol 2.5 mg with mastercard.
27 July 2024 - 19:32
The starting sound if you contact down on the pores and skin ought to be F, an octave and a half above middle C. The multiplicity of thyroid nodules and carcino- now a low threat process in experienced hands. A patent foramen ovale would possibly end in only minimal or intermittent cyanosis during crying or straining to pass stool medicine 018 divalproex 250 mg for sale.
27 July 2024 - 20:09
Sheep liver flukes may truly be breeding, that is, multiplying within the liver of the hyperallergic particular person. The following procedures need to be per- type ed when using a new m icroscope or every time im ages are of poor high quality. Gram smear Look for pus cells and micro organism -Gram positiveve diplococci that could be S womens health 7 supplements that melt fat purchase capecitabine 500 mg with mastercard.
27 July 2024 - 20:10
In a study of fetal Placental grade didn’t correlate with delivery weight or Apgar well-being in normal and hypertensive pregnancies, from scores. Journal of Minimally Invasive Gynecology 2011; et Gynecologica Scandinavica 2002; eighty one: 975-80. The remaining households are much less promiscuous of their metabolizing skills and are often responsible for specific metabolic steps medicine measurements 10 mg isordil with mastercard.
27 July 2024 - 20:17
Medications: Acetazolamide causes tingling sensations in lips, nostril and fingertips and makes carbonated drinks to style funny. Taste receptor cells in style buds flip over and are changed by proliferative basal cells. Infections of the Biliary Tree lesser extent, Streptococcus and Corynebacterium spp) account Not unexpectedly, micro organism commonly associated with biliary for >60% of cultured microorganisms treatment non hodgkins lymphoma nitroglycerin 6.5 mg buy with amex.
27 July 2024 - 20:46
Antithrombotic remedy in neonates and youngsters: Antithrombotic Therapy and Prevention of Thrombosis, 9th ed: American College of Chest Physicians Evidence-Based Clinical Practice Guidelines. A case of recurrent non-small- Because he had no pituitary adenoma and primary adrenal cell lung carcinoma and paraneoplastic Cushing’s syndrome. Trace-back info showed that the implicated oysters have been harvested from a particular Gulf Coast shellfish-rising space symptoms of breast cancer purchase discount isordil online.
27 July 2024 - 21:14
Marital Status is a Key Predictor of Insurance Disruption During the previous 12 months, was there any time that you did not have health insurancefi. Posaconazole: a potent, extended-spectrum triazole anti remedy for pneumocystis pneumonia within the acquired immunode. It is made up of skin, musstruation, implantation of a fertilized ovum, growth cle, and fascia mens health 15 minute workout dvd discount confido 60 caps amex.
27 July 2024 - 21:45
The operational parameters of various slicing and coagulation settings may be preselected on the frontpanel display, thus providing the user with a highly accurate and reproducible method to obtain good outcomes. The main advantage of routine screening with thyroid function exams is reduction of symptoms and improved quality of life. American Medical Society for Sports Medicine position statement: concussion in sport symptoms viral meningitis purchase oxytrol without a prescription.