locked
Auto Complete in SharePoint search using jquery RRS feed

  • Question

  • Hi All,

    Can any one tell me how to do auto complete search using jquery in SharePoint office 365.

    Thank you,

    Sowjanya.

    Tuesday, March 15, 2016 10:02 PM

Answers

  • At a simple version you can just use the jQuery autocomplete function as described here:

    https://jqueryui.com/autocomplete/

    You'd then send any text entered in that box to the search page.

    For a more neat version you'd want/need to pull or summarise terms from the index, which is a lot more difficult. A simpler, but still good, option would be to export past searches into the autocomplete list.

    Tuesday, March 15, 2016 10:19 PM
  • check this

    http://blogs.msdn.com/b/murads/archive/2013/02/20/using-jquery-ui-autocomplete-with-the-rest-api-to-get-search-results-in-the-search-box.aspx



       1: // Parse an item and create an title/value dictionary with all the properties available
    
       2: function getFields(results) {
    
       3:     r = {};
    
       4:     for(var i = 0; i<results.length; i++) {
    
       5:         if(results[i] != undefined && results[i].Key != undefined) {
    
       6:             r[results[i].Key] = results[i].Value;
    
       7:         }
    
       8:     }
    
       9:     return r;
    
      10: }
    
      11:  
    
      12: $(document).ready(function() {
    
      13:     
    
      14:     var autocomplete = $( "#restSearch" ).autocomplete({
    
      15:         minLength: 3,
    
      16:         source: function( request, response ) {
    
      17:             $.ajax({
    
      18:                 beforeSend: function (request)
    
      19:                 {
    
      20:                     request.setRequestHeader("Accept", "application/json;odata=verbose;charset=utf-8");
    
      21:                 },
    
      22:                 url: "/_api/search/query?querytext='" + request.term + "*'",
    
      23:                 dataType: "json",
    
      24:                 success: function( data ) {
    
      25:                     response( $.map( data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function( item ) {
    
      26:                         return {
    
      27:                             fields: getFields(item.Cells.results)
    
      28:                         }
    
      29:                     }));
    
      30:                 },
    
      31:                 error: function( data ) {
    
      32:                     alert('search error');
    
      33:                 }
    
      34:             });
    
      35:         },
    
      36:         // Run this when the item is in focused (not selected)
    
      37:         focus: function( event, ui ) {
    
      38:             //$( "#restSearch" ).val(ui.item.value );
    
      39:             return false;
    
      40:         },
    
      41:         // Run this when the item is selected
    
      42:         select: function( event, ui ) {
    
      43:             location.href = ui.item.fields.Path;
    
      44:         },
    
      45:         appendTo: $('#menu-container')
    
      46:     }).data( "uiAutocomplete" )._renderItem = function( ul, item ) {
    
      47:         // format the documents using the OOTB SharePoint icons
    
      48:         img = "ic" + item.fields.FileType + ".png";
    
      49:         if(item.fields.FileType == "html") {
    
      50:             img = "html16.png";
    
      51:         }
    
      52:         return $("<li>").append('<a><img style="margin-right:3px;top:3px;" src="/_layouts/15/images/'+ img +'">' + item.fields.Title + '</a>' )
    
      53:             .appendTo( ul );
    
      54:     };
    
      55: });

    Wednesday, March 16, 2016 6:37 AM

All replies

  • At a simple version you can just use the jQuery autocomplete function as described here:

    https://jqueryui.com/autocomplete/

    You'd then send any text entered in that box to the search page.

    For a more neat version you'd want/need to pull or summarise terms from the index, which is a lot more difficult. A simpler, but still good, option would be to export past searches into the autocomplete list.

    Tuesday, March 15, 2016 10:19 PM
  • check this

    http://blogs.msdn.com/b/murads/archive/2013/02/20/using-jquery-ui-autocomplete-with-the-rest-api-to-get-search-results-in-the-search-box.aspx



       1: // Parse an item and create an title/value dictionary with all the properties available
    
       2: function getFields(results) {
    
       3:     r = {};
    
       4:     for(var i = 0; i<results.length; i++) {
    
       5:         if(results[i] != undefined && results[i].Key != undefined) {
    
       6:             r[results[i].Key] = results[i].Value;
    
       7:         }
    
       8:     }
    
       9:     return r;
    
      10: }
    
      11:  
    
      12: $(document).ready(function() {
    
      13:     
    
      14:     var autocomplete = $( "#restSearch" ).autocomplete({
    
      15:         minLength: 3,
    
      16:         source: function( request, response ) {
    
      17:             $.ajax({
    
      18:                 beforeSend: function (request)
    
      19:                 {
    
      20:                     request.setRequestHeader("Accept", "application/json;odata=verbose;charset=utf-8");
    
      21:                 },
    
      22:                 url: "/_api/search/query?querytext='" + request.term + "*'",
    
      23:                 dataType: "json",
    
      24:                 success: function( data ) {
    
      25:                     response( $.map( data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function( item ) {
    
      26:                         return {
    
      27:                             fields: getFields(item.Cells.results)
    
      28:                         }
    
      29:                     }));
    
      30:                 },
    
      31:                 error: function( data ) {
    
      32:                     alert('search error');
    
      33:                 }
    
      34:             });
    
      35:         },
    
      36:         // Run this when the item is in focused (not selected)
    
      37:         focus: function( event, ui ) {
    
      38:             //$( "#restSearch" ).val(ui.item.value );
    
      39:             return false;
    
      40:         },
    
      41:         // Run this when the item is selected
    
      42:         select: function( event, ui ) {
    
      43:             location.href = ui.item.fields.Path;
    
      44:         },
    
      45:         appendTo: $('#menu-container')
    
      46:     }).data( "uiAutocomplete" )._renderItem = function( ul, item ) {
    
      47:         // format the documents using the OOTB SharePoint icons
    
      48:         img = "ic" + item.fields.FileType + ".png";
    
      49:         if(item.fields.FileType == "html") {
    
      50:             img = "html16.png";
    
      51:         }
    
      52:         return $("<li>").append('<a><img style="margin-right:3px;top:3px;" src="/_layouts/15/images/'+ img +'">' + item.fields.Title + '</a>' )
    
      53:             .appendTo( ul );
    
      54:     };
    
      55: });

    Wednesday, March 16, 2016 6:37 AM