Question 2596 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress Form field search via custom post types

So we currently have a drop down option that auto populates from custom post types and displays for the customer to choose from.

However, now their list is extremely long so they would like the functionality of being able to start typing a company name to reduce the amount of results in the list, but i’m completely stuck and need help converting our current option to the desired result.

    <div class="custom-control__wrap">
        <i class="fas fa-caret-down"></i>
        <select  data-field-name="customer" class="form-control validate[required] autosaveFieldDropdown" name="customer" id="customer">
            <option value="" selected>Company name</option>
            <?php
            $args = array(
              'post_type'   => 'companies',
              'post_status' => 'publish',
              'posts_per_page' => -1,
              'orderby' => 'title',
              'order' => 'ASC'
             );
             $posts = get_posts($args);
             ?>
             <?php foreach ($posts as $post): ?>
               <option value="<?php echo $post->ID; ?>" <?php echo ($personalInfoNameObj->customer == $post->ID) ? 'selected="selected"' : '';?> ><?php echo $post->post_title ; ?></option>
             <?php endforeach; ?>
        </select>
    </div>

Any help is greatly appreciated

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <div class="custom-control__wrap">
 <?php 

      $query = new WP_Query(array(
      'post_type' => 'companies',
      'post_status' => 'publish',
      'posts_per_page' => -1
      ));

  echo "<input id="company" list="company1" style="width: 100%; height: 55px;" placeholder="Start typing company name">
                                    <datalist id="company1" >";

  while ($query->have_posts()) {
  $query->the_post();
  $post_title = get_the_title();
  $post_id = get_the_id();
  echo "<option data-value="$post_id" value="$post_title"/>";
  }

  wp_reset_query();

  echo "</datalist>"; ?>
</div>

    Ended up using a WP Query with a while loop pushing into a datalist to get the desired result.


  2. 0

    Use below code it will work properly.

    <div class="custom-control__wrap">
        <i class="fas fa-caret-down"></i>
        <select  data-field-name="customer" class="form-control validate[required] autosaveFieldDropdown" name="customer" id="customer">
            <option value="" selected>Company name</option>
            <?php
            $args = array(
              'post_type'   => 'companies',
              'post_status' => 'publish',
              'posts_per_page' => -1,
              'orderby' => 'title',
              'order' => 'ASC'
             );
             $posts = new WP_Query($args);
             ?>
             <?php foreach ($posts as $post): ?>
               <option value="<?= $post->ID; ?>" <?= ($personalInfoNameObj->customer == $post->ID) ? 'selected="selected"' : '';?> ><?= $post->post_title ; ?></option>
             <?php endforeach; ?>
        </select>
    </div>
<?php wp_reset_postdata(); ?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search