Intereting Posts
Загрузить gravatar в профиле WP? Администрирование шаблона Ошибка после обновления WP 4.8 Пользовательские комментарии WP комментариев Запрос с вложенными комментариями возможен? (Иерархия / глубина) как вызвать файлы в дочерней теме? Редактировать изображения из Front End без доступа к WP Admin Вставить листок Google, когда вы просматриваете его на отдельной вкладке? the_meta – нет запроса get_the_meta? Как я могу отображать пользовательские типы сообщений под несколькими видами? как определить, что мы добавляем новый пользовательский тип сообщения или редактируем пользовательский тип сообщения Сколько запросов нормально выполнять на WP-сайте? Страница пользовательского шаблона не загружается get_header () правильно? как отобразить «Редактировать | Быстрое редактирование | Корзина | View "в пользовательском столбце WP_List_Table? Как ограничить страницы WordPress во время обновлений? Сортировка пользовательских столбцов в панели пользователя (users.php)? Как включить изменения для почтовых метаданных?

Как создать прямой просмотр автозаполнения?

В настоящее время я пытаюсь создать функцию поиска WordPress, которая отображает результаты в реальном времени под панелью поиска. Пример представлен на веб-сайте Всемирного банка (см. Ниже). Я не ищу автозаполнение, которое вы найдете на Google.com, который завершит вводимые вами слова, скорее я хочу, чтобы он нашел фактические записи на сайте.

Я попытался сделать скраб с помощью ответов WordPress и других подобных ресурсов, но только выполнил поиск по типу Google, который не является тем, что я ищу. Любая помощь или точки в правильном направлении были бы весьма полезны.

Поиск-перед тем

искать после

Solutions Collecting From Web of "Как создать прямой просмотр автозаполнения?"

В следующем примере используется jQuery UI Autocomplete, который был включен в WordPress с 3.3. (Я заимствовал формат с @ Rarst : D).

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

class AutoComplete { static $action = 'my_autocomplete';//Name of the action - should be unique to your plugin. static function load() { add_action( 'init', array( __CLASS__, 'init')); } static function init() { //Register style - you can create your own jQuery UI theme and store it in the plug-in folder wp_register_style('my-jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css'); add_action( 'get_search_form', array( __CLASS__, 'get_search_form' ) ); add_action( 'wp_print_footer_scripts', array( __CLASS__, 'print_footer_scripts' ), 11 ); add_action( 'wp_ajax_'.self::$action, array( __CLASS__, 'autocomplete_suggestions' ) ); add_action( 'wp_ajax_nopriv_'.self::$action, array( __CLASS__, 'autocomplete_suggestions' ) ); } static function get_search_form( $form ) { wp_enqueue_script( 'jquery-ui-autocomplete' ); wp_enqueue_style('my-jquery-ui'); return $form; } static function print_footer_scripts() { ?> <script type="text/javascript"> jQuery(document).ready(function ($){ var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>'; var ajaxaction = '<?php echo self::$action ?>'; $("#secondary #searchform #s").autocomplete({ delay: 0, minLength: 0, source: function(req, response){ $.getJSON(ajaxurl+'?callback=?&action='+ajaxaction, req, response); }, select: function(event, ui) { window.location.href=ui.item.link; }, }); }); </script><?php } static function autocomplete_suggestions() { $posts = get_posts( array( 's' => trim( esc_attr( strip_tags( $_REQUEST['term'] ) ) ), ) ); $suggestions=array(); global $post; foreach ($posts as $post): setup_postdata($post); $suggestion = array(); $suggestion['label'] = esc_html($post->post_title); $suggestion['link'] = get_permalink(); $suggestions[]= $suggestion; endforeach; $response = $_GET["callback"] . "(" . json_encode($suggestions) . ")"; echo $response; exit; } } AutoComplete::load(); 

Хорошо, это будет очень простой пример кода, который использует native suggest.js , ядро ​​WP для Ajax и связывается с формой поиска по умолчанию (из немодифицированного get_search_form() ). Это не совсем то, о чем вы просили, но инкрементный поиск – это огромная боль, чтобы добиться совершенства. 🙂

 class Incremental_Suggest { static function on_load() { add_action( 'init', array( __CLASS__, 'init' ) ); } static function init() { add_action( 'wp_print_scripts', array( __CLASS__, 'wp_print_scripts' ) ); add_action( 'get_search_form', array( __CLASS__, 'get_search_form' ) ); add_action( 'wp_print_footer_scripts', array( __CLASS__, 'wp_print_footer_scripts' ), 11 ); add_action( 'wp_ajax_incremental_suggest', array( __CLASS__, 'wp_ajax_incremental_suggest' ) ); add_action( 'wp_ajax_nopriv_incremental_suggest', array( __CLASS__, 'wp_ajax_incremental_suggest' ) ); } static function wp_print_scripts() { ?> <style type="text/css"> .ac_results { padding: 0; margin: 0; list-style: none; position: absolute; z-index: 10000; display: none; border-width: 1px; border-style: solid; } .ac_results li { padding: 2px 5px; white-space: nowrap; text-align: left; } .ac_over { cursor: pointer; } .ac_match { text-decoration: underline; } </style> <?php } static function get_search_form( $form ) { wp_enqueue_script( 'suggest' ); return $form; } static function wp_print_footer_scripts() { ?> <script type="text/javascript"> jQuery(document).ready(function ($) { $('#s').suggest('<?php echo admin_url( 'admin-ajax.php' ); ?>' + '?action=incremental_suggest'); }); </script><?php } static function wp_ajax_incremental_suggest() { $posts = get_posts( array( 's' => $_REQUEST['q'], ) ); $titles = wp_list_pluck( $posts, 'post_title' ); $titles = array_map( 'esc_html', $titles ); echo implode( "\n", $titles ); die; } } Incremental_Suggest::on_load(); 

Вы должны сделать это, используя Ajax, конечно, но здесь есть проблема. Поскольку WordPress использует MySQL, вы можете перенапрягнуть свой сервер на поиск, если попытаетесь заполнить поиск реальными запросами базы данных через Ajax, но то, что вы можете сделать, – это создать систему, в которой все сообщения будут сохранены в один большой «wp_options», и затем, когда поиск выполняется, вы запрашиваете это вместо реального поиска. Но помните, что вам нужно обновлять этот фрагмент текстовой / сериализованной переменной каждый раз, когда вы создаете или редактируете сообщение.

Если вы не хотите тратить некоторое время на разработку этого решения, я бы не рекомендовал вам делать такой «живой поиск».