Wordpress Form field search via custom post types-CodePudding

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 >
        <i ></i>
        <select  data-field-name="customer"  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

CodePudding user response：

Use below code it will work properly.

<div >
        <i ></i>
        <select  data-field-name="customer"  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(); ?>

CodePudding user response：

<div >
 <?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.