3

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.

5

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
    });
  });
  • Where do i put the code on the editForm? – Sabien Ambrose Dec 15 '16 at 21:57
  • 1
    a script editor web part or a content editor web part are the usual suspects – Eric Alexander Dec 15 '16 at 21:58
  • thats where i am stuck, i added the Content editor to the editform, but how do i change the link it is using? – Sabien Ambrose Dec 15 '16 at 21:59
  • figured it out.. Had to parse HTML then i could change the web part properties, thank you – Sabien Ambrose Dec 15 '16 at 22:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.