Document Library Title Field autocomplete

Question

I had some great help figuring out how to use SPServices to create an autocomplete textbox. However, my goal is now to get the autocomplete functionality to work on the title field of a document library in quick edit mode. The autocomplete simply reads from the title column of my "vendor list" right now, and that can stay. I am just not sure the best way to edit the title field in the quick edit mode.

Current code:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
      <script>

      // A $( document ).ready() block.
      var availableTags = [];
    $( document ).ready(function() {
    $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "VendorName", // or list name.
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    CAMLQuery: "<Query></Query>",
    completefunc: function (xData, Status){
    $(xData.responseXML).SPFilterNode("z:row").each(function(){
        var title =$(this).attr("ows_Title");
        availableTags.push(title);
    });     
    }
    });
    });

     $( function() {
       $( "input[title = 'Title']" ).autocomplete({
       source: availableTags
      });
     } );
     </script>

Edit: I am trying to follow this article as it gives the correct functionality: http://www.c-sharpcorner.com/UploadFile/sagarp/fields-autocomplete-for-sharepoint-2010-using-jquery-spservi/

However, the article adds the autocomplete to the newItem form. I want to add this functionality to the newItem form AND the quick edit mode screen. I can't follow this article as it is quite vague. Can someone walk me through this process?

Edit2: After doing some research I realize I have made this a bit more difficult than it needs to be. I can simply save the JS file in styleLibrary/scripts, and add a scriptlink tag to the aspx. What I am struggling with is: which .aspx page do I add the scriptlink to, to get this to work on quick edit mode?

Edit3: I tried a secondary way of making this work. I added a script editor to the allItems view, with the above code pasted in.. I am however getting an error: "The XSS Auditor refused to execute a script" on the 3 script tags linking to the CDNs.

Answer 1

Now that you have it working, you have to bind it your title field. Your function would become something like:

$(function() {
    $("input[title='Title']").autocomplete({
      source: availableTags
    });
  });