Setting Jquery UI Auto complete on SharePoint Text Filter

Steps,

1- Add Text Filter and List Web Part on the page.
2- Add connection between text filter and List webpart.
3- Open Notepad, Add following script in the Notepad.
4- Change the controlID variable value to the generated client id of Text Filter textbox.
5- Change the List and column names in the SP Service call.
6- Save the file in Site Asset library.
7- Add Content Editor web part on the page and provide link to the text file placed in the Site asset Library.

Enjoy:)



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2013.02a/jquery.SPServices.min.js"></script>
<script>
$(document).ready(function () {

var itemSource = [];

var controlID = "ctl00_ctl40_g_9e214f6c_cb92_480f_9684_ec6a243a1309_SPTextSlicerValueTextControl";

var externalParties = [];

  $().SPServices({
    operation: "GetListItems",
    listName: "Custom User",
    CAMLViewFields: "<ViewFields><FieldRef Name='space_x0020_column' /></ViewFields>",
    async: false,
select: function(event, ui){
$(this).trigger("change");
},
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
       externalParties.push($(this).attr("ows_space_x0020_column"));
console.log($(this).attr("ows_space_x0020_column"));
     
      });
    }
  });

  $("input[id$='"+ controlID +"']").autocomplete({
    source: externalParties,
    minLength: 2

});



});
</script>