Intereting Posts
Создание выходных данных для пользовательских типов сообщений Инструкции плагина-списка-категории Как установить пользовательский репозиторий обновлений WordPress? Разбор заголовка сообщения на странице медиа-бокса Как создать список ссылок для публикации с определенной категорией Что помешает пользовательской роли просматривать сообщения (как стандартные, так и пользовательские)? Перенаправить страницу на страницу по умолчанию ограничение числа сообщений для достижимой страницы Обновление WordPress полностью сломало установку. На главной странице теперь отображается пустая rss-лента Как присоединиться к двум таблицам из отдельных баз данных в WordPress Уникальный контент для страниц категории Woocommerce Мультиэкранная категория отображения с расширенными настраиваемыми полями Возможность предотвратить загрузку файлов Как добавить пользовательское поле на страницу WordPress каждый раз, когда пользователь загружает новое изображение в визуальный редактор WP? Меню навигации исчезает

Как сделать несколько зависимых полей ввода, которые используют функцию автозаполнения jquery?

Я пытаюсь создать форму, которая позволит пользователю добавить новый листинг на лицевой стороне моего сайта объявлений об оборудовании. У меня есть настраиваемый тип сообщения, настроенный с пользовательской таксономией, называемой listing_taxonomy. Таксономия является иерархической и довольно глубокой.

Я хочу отобразить 4 раскрывающихся поля ввода в форме, которая будет автозаполняться с использованием родителей или детей пользовательской таксономии. Эти поля будут составлять, категория, класс и модель. Каждое поле должно зависеть от предыдущего поля в форме.

Например, если пользователь выбирает make John Deere, то следующее поле ввода будет касаться всех дочерних элементов родительского термина John Deere. И так далее..

До сих пор я сделал несколько безуспешных попыток. Пожалуйста, помогите мне в правильном направлении! Бонусные баллы, если вы объясните, как я мог бы добавить новый термин, введенный пользователем, в правильное место в моей таксономии. Я приложу соответствующий код ниже. Позвольте мне знать, нужна ли дополнительная информация. Благодаря!

Функции PHP и Javascript:

link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <?php $cns_make = array( 'orderby' => 'name', 'order' => 'ASC', 'hide_empty' => false, 'include' => array(), 'exclude' => array(), 'exclude_tree' => array(), 'number' => '', 'offset' => '', 'fields' => 'names', 'name' => '', 'slug' => '', 'hierarchical' => true, 'search' => '', 'name__like' => '', 'description__like' => '', 'pad_counts' => false, 'get' => '', 'parent' => '0', 'childless' => false, 'cache_domain' => 'core', 'update_term_meta_cache' => true, 'meta_query' => '' ); $makeArray = get_terms( 'listing_taxonomy', $cns_make ); $cns_cat = array( 'orderby' => 'name', 'order' => 'ASC', 'hide_empty' => false, 'include' => array(), 'exclude' => array(), 'exclude_tree' => array(), 'number' => '', 'offset' => '', 'fields' => 'names', 'name' => '', 'slug' => '', 'hierarchical' => true, 'search' => '', 'name__like' => '', 'description__like' => '', 'pad_counts' => false, 'get' => '', 'parent' => '0', 'childless' => false, 'cache_domain' => 'core', 'update_term_meta_cache' => true, 'meta_query' => '' ); $catArray = get_terms( 'listing_taxonomy', $cns_cat ); ?> <script> $(function() { var availableTags = <?php echo json_encode($makeArray); ?>; $( "#cns-make" ).autocomplete({ source: availableTags }); }); $(function() { var availableTags = <?php echo json_encode($catArray); ?>; $( "#cns-category" ).autocomplete({ source: availableTags }); }); </script> 

Код формы:

  <form method="POST" action=""> <div class="meta-row"> <div class="meta-th"> <label for="listing-make" class="cns-row-title">Make</label> </div> <div class="meta-td"> <input id="cns-make" name="listing_make"> </div> </div> <div class="meta-row"> <div class="meta-th"> <label for="listing-class" class="cns-row-title">Category</label> </div> <div class="meta-td"> <input id="cns-category" > </div> </div> <div class="meta-row"> <input type="button" value="Save Listing" onclick="cns_save_new_listing()"> </div> </form> 

EDIT: включить решение Дэвида.

Новый код сценария:

 <?php $cns_make = array( 'orderby' => 'name', 'order' => 'ASC', 'hide_empty' => false, 'include' => array(), 'exclude' => array(), 'exclude_tree' => array(), 'number' => '', 'offset' => '', 'fields' => 'names', 'name' => '', 'slug' => '', 'hierarchical' => true, 'search' => '', 'name__like' => '', 'description__like' => '', 'pad_counts' => false, 'get' => '', 'parent' => '0', 'childless' => false, 'cache_domain' => 'core', 'update_term_meta_cache' => true, 'meta_query' => '' ); $makeArray = get_terms( 'listing_taxonomy', $cns_make ); $cns_cat = array( 'orderby' => 'name', 'order' => 'ASC', 'hide_empty' => false, 'include' => array(), 'exclude' => array(), 'exclude_tree' => array(), 'number' => '', 'offset' => '', 'fields' => 'names', 'name' => '', 'slug' => '', 'hierarchical' => true, 'search' => '', 'name__like' => '', 'description__like' => '', 'pad_counts' => false, 'get' => '', 'parent' => '0', 'childless' => false, 'cache_domain' => 'core', 'update_term_meta_cache' => true, 'meta_query' => '' ); $catArray = get_terms( 'listing_taxonomy', $cns_cat ); ?> <script> $(function() { var availableTags = <?php echo json_encode($makeArray); ?>; jQuery( "#cns-make" ).autocomplete({ source: availableTags, select: function (event, ui) { var data = new FormData(); var value = ui.item.value; data.append( 'action', 'your_function' ); data.append( 'varname', value ); jQuery.ajax({ url: ajax_url, type: 'POST', data: data, success: function( response ) { // response is a json string returned from your_function var availableCats = <?php echo json_encode($catArray); ?>; jQuery( "#cns-category" ).autocomplete( 'option', 'source', availableCats ); } }) } }); }); </script> 

Новый код формы:

 <div class="meta-row"> <div class="meta-th"> <label for="listing-make" class="cns-row-title">Make</label> </div> <div class="meta-td"> <input id="cns-make" name="listing_make" value=""> </div> </div> <div class="meta-row"> <div class="meta-th"> <label for="listing-class" class="cns-row-title">Category</label> </div> <div class="meta-td"> <input id="cns-category" name="listing_category" value=""> </div> </div> 

Добавьте автозаполнение 'select' catch в свое первое поле автозаполнения. Используйте это, чтобы получить выбранное значение из автозаполнения. Используйте Ajax-вызов, чтобы получить следующий источник автозаполнения на основе выбранного значения и применить новый источник к следующему полю автозаполнения.

 jQuery( "#cns-make" ).autocomplete({ source: availableTags, select: function (event, ui) { var data = new FormData(); var value = ui.item.value; data.append( 'action', 'your_function' ); data.append( 'varname', value ); jQuery.ajax({ url: ajax_url, type: 'POST', data: data, success: function( response ) { // response is a json string returned from your_function jQuery( "#cns-category" ).autocomplete( 'option', 'source', response ); } }) } }); 

Справка