[Resolved] Use html in autocomplete search

[Author]

Posts

[vimalS]

Tell us what you are trying to do? : I would like to use html in jquery autocomplete search using toolset

Is there any documentation that you are following? : https://toolset.com/forums/topic/add-jquery-autocomplete-to-a-views-search-filter/

Please check attached screenshot for html.

[Luo Yang]

Hello,

There isn't such a built-in feature within custom search form of Views plugin, as you can see it needs custom codes.

And the solution you mentioned above:
https://toolset.com/forums/topic/add-jquery-autocomplete-to-a-views-search-filter/
It will output all post titles into a JS array, it works for some small website, it will produce some unexpected result in some large website.

If you still need assistance for it, please provide a test site with the same problem, I can setup a demo for you.

[Luo Yang]

Thanks for the details, in the new version of Views plugin, the shortcode [wpv-layout-start] ... [wpv-layout-end] will output an extra HTML DIV tag, in your case, we need to remove the DIV tag, I have done below modification in your website:
1) Edit your theme file "functions.php", add below code:

add_shortcode('hide-it', 'hide_it_func');
function hide_it_func(){
    return;
}

2) Edit the view "Ajax Services", in section "Loop Editor", edit the codes to:

[hide-it][wpv-layout-start][/hide-it]
...
[hide-it][wpv-layout-end][/hide-it]

3) Test it in front-end, for example:
hidden link
input text "ser", it works fine, see screenshot autocomplete.JPG

[vimalS]

Hello,

Is it possible to add html in below json?

var autocomplete_source = [<wpv-loop>"[wpv-post-title] [wpv-post-title item="$parent"]", </wpv-loop>];

[Luo Yang]

Yes, you can add html in above json, but it might not be able to display in front-end, I suggest you follow Jquery document to setup the json data:
hidden link

[vimalS]

Hi Luo,

I found this link : hidden link

Thanks

[Luo Yang]

As I mentioned above, you will need to follow jQuery document to setup the JS codes,, in the document you mentioned above:
hidden link, click the link "view source", you will be able to see the example codes:

 <script>
  $( function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];
 
    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
 
        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
        .appendTo( ul );
    };
  } );
  </script>

[vimalS]

Yes