2

I am working on Sharepoint 2013 Autocomplete functionality

I created 2 lists

1) FruitsList --> List 1 | FruitName --> column

2) FruitFetching --> List 2 | Name of the fruit --> column

I gave the list of items to the FruitsList and what I want to achieve is I want to fetch the list of items from Fruitfetching list through Autocomplete.

I added the code in SharePoint webpart. Sharing the code below.

<link href= https://alshayacom.sharepoint.com/sites/TimesheetDEV/MasterDetailSite/SiteAssets/autocomplete-0.3.0.css rel="stylesheet" />
<script src= https://alshayacom.sharepoint.com/sites/TimesheetDEV/MasterDetailSite/SiteAssets/jquery-3.1.1.js type="text/javascript" ></script>
<script src= https://alshayacom.sharepoint.com/sites/TimesheetDEV/MasterDetailSite/SiteAssets/jquery-ui.js type="text/javascript" ></script>    
<script src= https://alshayacom.sharepoint.com/sites/TimesheetDEV/MasterDetailSite/SiteAssets/jquery.SPServices-0.7.2.js type="text/javascript" ></script>



<script type = "text/javascript">
$(document).ready(function(){    
    readyCall();    
});

function readyCall()
{
   var externalParties = [];
   $().SPServices({
   operation:"GetListItems",
   listName:"FruitsList",
   CAMLViewFields:"<ViewFields><FieldRef Name='FruitName'/></ViewFields>",
    async:false,
   completrefunc:function(xData,Status){

    $(xData.responseXML).SPFilterNode("z:row").each(function(){
    externaParties.push($(this).attr("FruitName"));
});
}

});

   $("input[id$='Name_x0020_Of_x0020_the_x0020_Fr_5df8c07d-1dd7-4e65-a9fe-695dbe65f187_$TextField']").autocomplete({
     source:externalParties});

}
</script>

This is my code. I added debugger inside the function. but it is not going inside SPservices it is directly going to the input text box.

As I am new to SharePoint can anyone plz help on resolving this issue.

If I add an alert in the complete function I am geeting like this below screen shot enter image description here

Thanks in Advance

0

Tyr out below code and let me know if it works for you.

<script type="text/javascript">
$(document).ready(function(){
    readyCall();
});

function readyCall()
{
    var externalParties = [];
    $().SPServices({
        operation:"GetListItems",
        listName:"FruitsList",
        CAMLViewFields:"<ViewFields><FieldRef Name='FruitName'/></ViewFields>",
        async:false,
        completrefunc:function(xData,Status){
            $(xData.responseXML).SPFilterNode("z:row").each(function(){
                externalParties.push($(this).attr("ows_FruitName"));
            });
        }
    });

    $("input[id$='Name_x0020_Of_x0020_the_x0020_Fr_5df8c07d-1dd7-4e65-a9fe-695dbe65f187_$TextField']").autocomplete({
        source:externalParties});
}
</script>
  • No it is not working. I am debugging the code it is not going to the second line of spservices – Nisha Nov 23 '16 at 5:20
  • just try to run the code without debugging. – Gaurravs Nov 23 '16 at 5:24
  • No luck, its not working – Nisha Nov 23 '16 at 5:28
  • are you seeing any error in console ? – Gaurravs Nov 23 '16 at 5:38
  • No i am not seeing any error – Nisha Nov 23 '16 at 6:12
0

As Call is async, you have to wait till servers returns fruitname, so you need to put initialization code inside your complete function. below is updated code.

<script type = "text/javascript">
$(document).ready(function(){

readyCall();

});

function readyCall()
{
   var externalParties = [];
   $().SPServices({
   operation:"GetListItems",
   listName:"FruitsList",
   CAMLViewFields:"<ViewFields><FieldRef Name='FruitName'/></ViewFields>",
    async:false,
   completefunc:function(xData,Status){

    $(xData.responseXML).SPFilterNode("z:row").each(function(){
    externaParties.push($(this).attr("FruitName"));
});

 $("input[id$='Name_x0020_Of_x0020_the_x0020_Fr_5df8c07d-1dd7-4e65-a9fe-695dbe65f187_$TextField']").autocomplete({
     source:externalParties});

}

});



}
</script>
  • No it is not working. I am debugging the code it is not going to the second line of spservices – Nisha Nov 23 '16 at 5:16
  • please correct spelling of complete function it is "completrefunc" it should be "completefunc" – Siddharth Vaghasia Nov 23 '16 at 6:27
  • Ya i corrected that one after that also it is not working – Nisha Nov 23 '16 at 6:48
  • is the execution going inside completefunc ? what are you getting in Status variable ? try to put alert in alert(xData.responseXML.xml); to check the XML...paste screenshot of output of xml... – Siddharth Vaghasia Nov 23 '16 at 6:51
  • I put that alert in that complete function and i attached the screen shot – Nisha Nov 23 '16 at 7:17
0

Hi I got a solution for the above question, I am sharing the details below

<link href= "https://alshayacom.sharepoint.com/sites/TimesheetDEV/MasterDetailSite/SiteAssets/autocomplete-0.3.0.css" rel="stylesheet" />
<script src= "https://alshayacom.sharepoint.com/sites/TimesheetDEV/MasterDetailSite/SiteAssets/jquery-1.8.3.js" type="text/javascript" ></script>
<script src= "https://alshayacom.sharepoint.com/sites/TimesheetDEV/MasterDetailSite/SiteAssets/jquery-ui.js" type="text/javascript" ></script>
<script src= "https://alshayacom.sharepoint.com/sites/TimesheetDEV/MasterDetailSite/SiteAssets/jquery.SPServices-0.7.2.js" type="text/javascript" ></script>




<script  language ="javascript" type = "text/javascript">
$(document).ready(function(){

readyCall();

});

function readyCall()
{

   document.getElementById('Name_x0020_Of_x0020_the_x0020_Fr_5df8c07d-1dd7-4e65-a9fe-695dbe65f187_$TextField').title = 'FruitNames';

  $().SPServices.SPAutocomplete({ 
              sourceList: "FruitsList",
            sourceColumn: "FruitNames",
            columnName: "FruitNames",
            ignoreCase: true,
            numChars: 2,
            slideDownSpeed: 50,
            debug: true


});



}
</script>

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.