title: Apply Chosen Select Plugin in Wordpress AJAX
body: <p>P.S. This question is long as there's lot of code. Thank you for your patience and time. I appreciate it.<br>
  I am using <a href="http://wordpress.org/plugins/ultimate-wp-query-search-filter/" rel="nofollow noreferrer">ultimate wp query search filter</a> plugin on my wordpress site. I would like to use chosen plugin instead of default select boxes. The select boxes already on the page are working perfectly with this code.</p>
  
  <pre><code>(function($){
  $(".first-ddwn, .second-ddwn, .third-ddwn, .main-ddwn, .posts_ajax select").chosen({
  no_results_text: "Oops, nothing found!",
  width: "50%"
  });
  })(jQuery); 
  </code></pre>
  
  <p>I have changed the result html for AJAX search as mentioned by the plugin author so that I get a dropdown of result posts.</p>
  
  <pre><code>add_filter('uwpqsf_result_tempt', 'customize_output', '', 4);
  function customize_output($results , $arg, $id, $getdata ){
   // The Query
          global $post;
          $apiclass = new uwpqsfprocess();
           $query = new WP_Query( $arg );
      ob_start();    $result = '';?&gt;
      &lt;form action="&lt;? bloginfo('url'); ?&gt;" method="get"&gt;&lt;?php
      echo '&lt;select name="page_id" id="page_id"&gt;';
      echo '&lt;option value=""&gt;Select&lt;/option&gt;';
          // The Loop
      if ( $query-&gt;have_posts() ) {
          while ( $query-&gt;have_posts() ) {
              $query-&gt;the_post(); ?&gt;
                              &lt;option value="&lt;? echo $post-&gt;ID; ?&gt;"&gt;&lt;?php echo the_title(); ?&gt;&lt;/option&gt;
       &lt;?php   }
     echo '&lt;/select&gt;';  
     echo '&lt;input type="submit" name="submit" value="view" /&gt;';
     echo '&lt;/form&gt;';
       } else {
                   echo  'no post found';
              }
              /* Restore original Post Data */
              wp_reset_postdata();
  
      $results = ob_get_clean();        
          return $results;
  }
  </code></pre>
  
  <p>However, chosen doesn't get applied to this result dropdown. I have tried the option of using settimeout after the AJAX call as mentioned <a href="http://davidwalsh.name/jquery-chosen#comment-29299" rel="nofollow noreferrer">http://davidwalsh.name/jquery-chosen#comment-29299</a> but it didn't work. maybe I did it wrong. Also when I run it after ajax call like below, chosen does get applied to the select but is all broken.</p>
  
  <pre><code>jQuery.ajax({
               type: 'POST',   
               url: ajax.url,
               timeout:3000,
               data: ({action : 'uwpqsf_ajax',getdata:getdata, pagenum:pagenum }),
               beforeSend:function() {$(''+ajxdiv+'').empty();res.container.append(res.loader);},
               success: function(html) {
                  res.container.find(res.loader).remove();
                $(''+ajxdiv+'').html(html);
                $(".content select").chosen();
               }
               });
  </code></pre>
  
  <p>This is what I get
  <img src="https://i.stack.imgur.com/NZTh5.jpg" alt="enter image description here"><img src="https://i.stack.imgur.com/QRO8U.jpg" alt="enter image description here"><img src="https://i.stack.imgur.com/7mjF8.jpg" alt="enter image description here"></p>
  
  <p>This is plugin's uwpqsfscript.js file</p>
  
  <pre><code>jQuery(document).ready(function($) {
  
      $('body').on('click','.usearchbtn', function(e) {
          process_data($(this));
          return false;
      });
  
      $('body').on('click','.upagievent', function(e) {
          var pagenumber =  $(this).attr('id');
          var formid = $('#curuform').val();
          upagi_ajax(pagenumber, formid);
          return false;
      });
  
      $('body').on('keypress','.uwpqsftext',function(e) {
        if(e.keyCode == 13){
          e.preventDefault();
          process_data($(this));
        }
      });
  
      window.process_data = function ($obj) {
  
          var ajxdiv = $obj.closest("form").find("#uajaxdiv").val();  
          var res = {loader:$('&lt;div /&gt;',{'class':'umloading'}),container : $(''+ajxdiv+'')};
  
          var getdata = $obj.closest("form").serialize();
          var pagenum = '1';
  
          jQuery.ajax({
               type: 'POST',   
               url: ajax.url,
               timeout:3000,
               data: ({action : 'uwpqsf_ajax',getdata:getdata, pagenum:pagenum }),
               beforeSend:function() {$(''+ajxdiv+'').empty();res.container.append(res.loader);},
               success: function(html) {
                  res.container.find(res.loader).remove();
                $(''+ajxdiv+'').html(html);
  
               }
               });
  
      }   
  
      window.upagi_ajax = function (pagenum, formid) {
          var ajxdiv = $(''+formid+'').find("#uajaxdiv").val();   
          var res = {loader:$('&lt;div /&gt;',{'class':'umloading'}),container : $(''+ajxdiv+'')};
          var getdata = $(''+formid+'').serialize();
  
          jQuery.ajax({
               type: 'POST',   
               url: ajax.url,
               data: ({action : 'uwpqsf_ajax',getdata:getdata, pagenum:pagenum }),
               beforeSend:function() {$(''+ajxdiv+'').empty(); res.container.append(res.loader);},
               success: function(html) {
                res.container.find(res.loader).remove();
                $(''+ajxdiv+'').html(html);
  
              //res.container.find(res.loader).remove();
               }
               });
      }
  
   $('body').on('click', '.chktaxoall,.chkcmfall',function () {
  
      $(this).closest('.togglecheck').find('input:checkbox').prop('checked', this.checked);
  
       });
  
  });//end of script
  </code></pre>
  
  <p>And some relevant code (maybe?) from uwpqsf-process-class.php</p>
  
  <pre><code>//front ajax
       add_action( 'wp_ajax_nopriv_uwpqsf_ajax', array($this, 'uwpqsf_ajax') );
       add_action( 'wp_ajax_uwpqsf_ajax', array($this, 'uwpqsf_ajax') );
       add_action( 'pre_get_posts', array($this ,'uwpqsf_search_query'),1000);
      }
  function uwpqsf_ajax(){
  $postdata =parse_str($_POST['getdata'], $getdata);
  $taxo = (isset($getdata['taxo']) &amp;&amp; !empty($getdata['taxo'])) ? $getdata['taxo'] : null;
  $cmf = (isset($getdata['cmf']) &amp;&amp; !empty($getdata['cmf'])) ? $getdata['cmf'] : null;
  $formid = $getdata['uformid'];
  $nonce =  $getdata['unonce'];
  $pagenumber = isset($_POST['pagenum']) ? $_POST['pagenum'] : null;
  
  if(isset($formid) &amp;&amp; wp_verify_nonce($nonce, 'uwpsfsearch')){
      $id = absint($formid);
      $options = get_post_meta($id, 'uwpqsf-option', true);
      $cpts = get_post_meta($id, 'uwpqsf-cpt', true);
      $pagenumber = isset($_POST['pagenum']) ? $_POST['pagenum'] : null;
      $default_number = get_option('posts_per_page');
  
      $cpt        = !empty($cpts) ? $cpts : 'any';
      $ordermeta  = !empty($options[0]['smetekey']) ? $options[0]['smetekey'] : null;
      $ordertype = (!empty($options[0]['otype']) ) ? $options[0]['otype'] : null;
      $order      = !empty($options[0]['sorder']) ? $options[0]['sorder'] : null;
      $number      = !empty($options[0]['resultc']) ? $options[0]['resultc'] : $default_number;
  
      $keyword = !empty($getdata['skeyword']) ? sanitize_text_field($getdata['skeyword']) : null;
      $get_tax = $this-&gt;get_uwqsf_taxo($id, $taxo);
      $get_meta = $this-&gt;get_uwqsf_cmf($id, $cmf);
  
      if($options[0]['snf'] != '1' &amp;&amp; !empty($keyword)){
       $get_tax = $get_meta = null;
      }
  
      $ordermeta  = apply_filters('uwpqsf_ometa_query',$ordermeta,$getdata,$id);
      $ordervalue = apply_filters('uwpqsf_ometa_type',$ordertype,$getdata,$id);
      $order      = apply_filters('uwpqsf_order_query',$order,$getdata,$id);  
      $number     = apply_filters('uwpqsf_pnum_query',$number,$getdata,$id);  
  
  
  
      $args = array(
          'post_type' =&gt; $cpt,
          'post_status' =&gt; 'publish',
          'meta_key'=&gt; $ordermeta,
          'orderby' =&gt; $ordertype,
          'order' =&gt; $order, 
          'paged'=&gt; $pagenumber,
          'posts_per_page' =&gt; $number,
          'meta_query' =&gt; $get_meta,                      
          'tax_query' =&gt; $get_tax,
          's' =&gt; esc_html($keyword),
          );
  
      $arg = apply_filters( 'uwpqsf_query_args', $args, $id,$getdata);        
  
  
  
      $results =  $this-&gt;uajax_result($arg, $id,$pagenumber,$getdata);
      $result = apply_filters( 'uwpqsf_result_tempt',$results , $arg, $id, $getdata );    
  
      echo $result;
      }else{ echo 'There is error here';}
          die;    
  
  
  
   }//end ajax    
  
    function uajax_result($arg, $id,$pagenumber,$getdata){
          $query = new WP_Query( $arg );
      $html = '';
          //print_r($query);  // The Loop
      if ( $query-&gt;have_posts() ) {
        $html .= '&lt;h1&gt;'.__('Search Results :', 'UWPQSF' ).'&lt;/h1&gt;';
         while ( $query-&gt;have_posts() ) {
                  $query-&gt;the_post();global $post;
              $html .= '&lt;article&gt;&lt;header class="entry-header"&gt;'.get_the_post_thumbnail().'';
              $html .= '&lt;h1 class="entry-title"&gt;&lt;a href="'.get_permalink().'" rel="bookmark"&gt;'.get_the_title().'&lt;/a&gt;&lt;/h1&gt;';
              $html .= '&lt;/header&gt;';
              $html .= '&lt;div class="entry-summary"&gt;'.get_the_excerpt().'&lt;/div&gt;&lt;/article&gt;';
  
            }
              $html .= $this-&gt;ajax_pagination($pagenumber,$query-&gt;max_num_pages, 4, $id,$getdata);
           } else {
                      $html .= __( 'Nothing Found', 'UWPQSF' );
                  }
                  /* Restore original Post Data */
                  wp_reset_postdata();
  
          return $html;
  
  
    }//end result  
  </code></pre>
  
  <p>I have been searching for days and have tried many things to make this work. I have no knowledge of jquery,so maybe someone will help me out.
  Many Thanks</p>