none
Auto complete column sharepoint2010 RRS feed

  • Question

  • I have infopath form where i would need to Autocomplete column for Country column from below target list Code below column

    Country(lookup column list :Code)

    Country:

    CODE list

    Title

    ABC


    Blitz


    • Edited by sree_23 Monday, August 5, 2019 12:07 PM
    Monday, August 5, 2019 12:04 PM

Answers

  • Hi,

    Try to remove the beforeSend method and complete method. And check if you have other jquery library reference in this page.

    <script type="text/javascript">
    var myVar;
    $(document).ready(function () {
    	myVar = setInterval(AutoPopulateCountry, 500);	   
    });
    function AutoPopulateCountry() {
    	if($("h4>span:contains('Country')").closest("td").next().find("input").length>0){
    		$("h4>span:contains('Country')").closest("td").next().find("input").autocomplete({
            source: function( request, response ) {
                $.ajax({             
                    url: "http://sp2010/_vti_bin/listdata.svc/Country", 
                    type: "GET",
                    headers: { 
                        Accept: "application/json;odata=verbose" 
                    }, 
                    async: false,
                    success: function (data, status, xhr) {
                        arrayCountry = [];
                        for(i =0; i<data.d.results.length; i++) {         
                            arrayCountry.push(data.d.results[i]["Title"]);               
                        }
                        arrayCountry=$.unique(arrayCountry);
                        response(arrayCountry);
                        //console.log("success");         
                    }, 
                    error: function (xhr, status, error) {                      
                        //console.log("error: "+ xhr.responseText); 
                    }
                 });
              },
              minLength: 3
            });
    		clearInterval(myVar);
    	}   
    }   
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Thursday, August 8, 2019 8:11 AM
    Moderator
  • Hi,

    Modify the code as below, it will show the data base on the input value.

    <script type="text/javascript">
    var myVar;
    $(document).ready(function () {
    	myVar = setInterval(AutoPopulateCountry, 500);	   
    });
    function AutoPopulateCountry() {
    	if($("h4>span:contains('Country')").closest("td").next().find("input").length>0){
    		$.ajax({             
                url: "http://sp2010/_vti_bin/listdata.svc/Country", 
                type: "GET",
                headers: { 
                    Accept: "application/json;odata=verbose" 
                }, 
                async: false,
                success: function (data, status, xhr) {
                    arrayCountry = [];
                    for(i =0; i<data.d.results.length; i++) {         
                        arrayCountry.push(data.d.results[i]["Title"]);               
                    }
                    arrayCountry=$.unique(arrayCountry);
                    $("h4>span:contains('Country')").closest("td").next().find("input").autocomplete({source:arrayCountry});
                }, 
                error: function (xhr, status, error) {                      
                    //console.log("error: "+ xhr.responseText); 
                }
            });
    		clearInterval(myVar);
    	}   
    }   
    </script>
    

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by sree_23 Thursday, August 8, 2019 9:09 AM
    Thursday, August 8, 2019 8:59 AM
    Moderator
  • Hi,

    You can use Id directly in jQuery code.

    Replace

    $("h4>span:contains('Cost Centre')").closest("td").next().find("input")

    with

    $("#id of the textbox field")

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by sree_23 Thursday, August 8, 2019 10:09 AM
    Thursday, August 8, 2019 9:43 AM
    Moderator

All replies

  • Hi,

    We can use jQuery UI autocomplete function to achieve it, the following article for your reference.

    jQueryUI’s Autocomplete Function on InfoPath Forms in SharePoint

    Or check the thread below.

    AutoComplete on Browser Infopath Form Field

    Best Regards,

    Dennis 


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Proposed as answer by LinyusMVP Tuesday, August 6, 2019 2:52 AM
    Tuesday, August 6, 2019 2:38 AM
    Moderator
  • Hi,

    You can use a textbox in InfoPath form for the "Country", then from the UI, use listdata.svc to get data from other list, then using jQuery autocomplete function to bind the data.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, August 6, 2019 9:05 AM
    Moderator
  • Thanks. Kindly help with some sample script as i tried the same at my end but no luck

    Blitz

    Tuesday, August 6, 2019 12:01 PM
  • Hi,

    Example:

    1.Create a custom list "Country".

    2.Create a InfoPath form add field "Country" with textbox.

    3.In newifs.aspx page, add the code into content editor web part.

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {  
    	setTimeout(function(){
    		AutoPopulateCountry();	
    	}, 1000);   
    });
    function AutoPopulateCountry() {	 
        $("h4>span:contains('Country')").closest("td").next().find("input").autocomplete({
            source: function( request, response ) {
                $.ajax({             
                    url: "http://sp2010/_vti_bin/listdata.svc/Country", 
                    type: "GET",
                    headers: { 
                        Accept: "application/json;odata=verbose" 
                    }, 
                    async: false,
                    cache: false,
                    beforeSend: function(){     
                        console.log("beforeSend");              
                    },
                    success: function (data, status, xhr) {
                        arrayCountry = [];
                        for(i =0; i<data.d.results.length; i++) {         
                            arrayCountry.push(data.d.results[i]["Title"]);               
                        }
                        arrayCountry=$.unique(arrayCountry);
                        response(arrayCountry);
                        console.log("success");         
                    }, 
                    error: function (xhr, status, error) {                      
                        console.log("error: "+ xhr.responseText); 
                    },
                    complete: function(){
                        console.log("complete");
                    }
                });
              },
              minLength: 3
            });
        }   
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, August 7, 2019 8:26 AM
    Moderator
  • Hi,

    Use setInterval to instead of timeout method. The code as below.

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    var myVar;
    $(document).ready(function () {
    	myVar = setInterval(AutoPopulateCountry, 500);	   
    });
    function AutoPopulateCountry() {
    	if($("h4>span:contains('Country')").closest("td").next().find("input").length>0){
    		$("h4>span:contains('Country')").closest("td").next().find("input").autocomplete({
            source: function( request, response ) {
                $.ajax({             
                    url: "http://sp2010/_vti_bin/listdata.svc/Country", 
                    type: "GET",
                    headers: { 
                        Accept: "application/json;odata=verbose" 
                    }, 
                    async: false,
                    cache: false,
                    beforeSend: function(){     
                        console.log("beforeSend");              
                    },
                    success: function (data, status, xhr) {
                        arrayCountry = [];
                        for(i =0; i<data.d.results.length; i++) {         
                            arrayCountry.push(data.d.results[i]["Title"]);               
                        }
                        arrayCountry=$.unique(arrayCountry);
                        response(arrayCountry);
                        console.log("success");         
                    }, 
                    error: function (xhr, status, error) {                      
                        console.log("error: "+ xhr.responseText); 
                    },
                    complete: function(){
                        console.log("complete");
                    }
                });
              },
              minLength: 3
            });
    		clearInterval(myVar);
    	}   
    }   
    </script>
    
    Best Regards,
    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, August 8, 2019 7:23 AM
    Moderator
  • Hi,

    Try to remove the beforeSend method and complete method. And check if you have other jquery library reference in this page.

    <script type="text/javascript">
    var myVar;
    $(document).ready(function () {
    	myVar = setInterval(AutoPopulateCountry, 500);	   
    });
    function AutoPopulateCountry() {
    	if($("h4>span:contains('Country')").closest("td").next().find("input").length>0){
    		$("h4>span:contains('Country')").closest("td").next().find("input").autocomplete({
            source: function( request, response ) {
                $.ajax({             
                    url: "http://sp2010/_vti_bin/listdata.svc/Country", 
                    type: "GET",
                    headers: { 
                        Accept: "application/json;odata=verbose" 
                    }, 
                    async: false,
                    success: function (data, status, xhr) {
                        arrayCountry = [];
                        for(i =0; i<data.d.results.length; i++) {         
                            arrayCountry.push(data.d.results[i]["Title"]);               
                        }
                        arrayCountry=$.unique(arrayCountry);
                        response(arrayCountry);
                        //console.log("success");         
                    }, 
                    error: function (xhr, status, error) {                      
                        //console.log("error: "+ xhr.responseText); 
                    }
                 });
              },
              minLength: 3
            });
    		clearInterval(myVar);
    	}   
    }   
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Thursday, August 8, 2019 8:11 AM
    Moderator
  • Hi,

    Modify the code as below, it will show the data base on the input value.

    <script type="text/javascript">
    var myVar;
    $(document).ready(function () {
    	myVar = setInterval(AutoPopulateCountry, 500);	   
    });
    function AutoPopulateCountry() {
    	if($("h4>span:contains('Country')").closest("td").next().find("input").length>0){
    		$.ajax({             
                url: "http://sp2010/_vti_bin/listdata.svc/Country", 
                type: "GET",
                headers: { 
                    Accept: "application/json;odata=verbose" 
                }, 
                async: false,
                success: function (data, status, xhr) {
                    arrayCountry = [];
                    for(i =0; i<data.d.results.length; i++) {         
                        arrayCountry.push(data.d.results[i]["Title"]);               
                    }
                    arrayCountry=$.unique(arrayCountry);
                    $("h4>span:contains('Country')").closest("td").next().find("input").autocomplete({source:arrayCountry});
                }, 
                error: function (xhr, status, error) {                      
                    //console.log("error: "+ xhr.responseText); 
                }
            });
    		clearInterval(myVar);
    	}   
    }   
    </script>
    

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by sree_23 Thursday, August 8, 2019 9:09 AM
    Thursday, August 8, 2019 8:59 AM
    Moderator
  • Hi,

    Using F12 developer tools to check the HTML code of the custom InfoPath new form page. And replace the code in above.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, August 8, 2019 9:13 AM
    Moderator
  • Hi,

    You can use Id directly in jQuery code.

    Replace

    $("h4>span:contains('Cost Centre')").closest("td").next().find("input")

    with

    $("#id of the textbox field")

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by sree_23 Thursday, August 8, 2019 10:09 AM
    Thursday, August 8, 2019 9:43 AM
    Moderator
  • Hi,

    Please try to modify the code as below.

    function onfocus()
    {
    return (Textbox.OnFocus(this,event));
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, August 12, 2019 1:21 AM
    Moderator
  • Hi,

    Which line of code throw the error?

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, August 12, 2019 9:41 AM
    Moderator
  • Hi,

    Error is resolved but list data contains more than 600 items and when we type the input letters its taking lot of time to list the choices also we are unable to scroll the choices after 40 items that are getting displayed in auto complete text box. how can we handle these kind of hidden choices due to large list data.please suggest.


    Blitz



    • Edited by sree_23 Tuesday, August 13, 2019 11:34 AM
    Tuesday, August 13, 2019 10:19 AM