Intereting Posts
Включить связанные настраиваемые поля из одного типа сообщений в канал JSON другого типа Слишком много сообщений вызывают медленную нагрузку при разбиении на страницы Использование динамических условий в фильтре 'posts_where' Как определить, совместим ли плагин с несколькими компонентами? Желание изменить презентацию с полного поста на признанное изображение (post_thumbnail) только Изменение ссылки «просмотр» для пользовательского типа сообщения на экране списка сообщений? Остановите редактор, добавив «amp;» после каждого «&» Как отфильтровать описание метакатализатора excerpt в admin? Как получить сообщение, вызвав ajax? Как я могу перенаправить на другую страницу с экраном уже в нижней части страницы? the_tags без гиперссылок? Flexslider не будет работать на WordPress Создание кнопки WordPress для последующего использования, отсутствие недостающего ингредиента Где разместить 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», и затем, когда поиск выполняется, вы запрашиваете это вместо реального поиска. Но помните, что вам нужно обновлять этот фрагмент текстовой / сериализованной переменной каждый раз, когда вы создаете или редактируете сообщение.

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