locked
Auto Complete with Category RRS feed

  • Question

  • User1324715958 posted

    I'm trying to add a category section to my now working auto complete. Here is my current code:

    $(document).ready(function() 
            {
                var DataList = [];
    			BuildDataList();
    			
                $("input").on("keypress", function () {
    				populate2();
                });
    			
    			$("select").on("change", function() {	
    				DataList = [];
    				BuildDataList();	
    				populate2();
    			});
    			
    			$( function populate2 () 
    			{
    				$( "#txt_search" ).autocomplete({ source: DataList});
    			} );
    
    function BuildDataList() {
    				$.ajax({
    					type: "GET",
    					async: false,
    					//url: "XML_F52E2B61-18A1-11d1-B105-00805F49916B13.xml",
    					url: "XML_F52E2B61-18A1-11d1-B105-00805F49916B2-new.xml",
    					cache: false,
    					dataType: "xml",
    					success: function(xml) {
    						 var filter = $('#filter :selected').text();				 
    						 					 
    						 switch (filter)
    						 {
    case "Workforce":
    								$(xml).find('Workforce Product').each(function()
    								 {
    									//Add Product Names To List								 
    									$(this).find("prd_name").each(function(){
    										var name = $(this).text();				
    										 DataList.push(String(name));
    									});
    									
    									//Add Product Codes To List
    									$(this).find("prd_code").each(function(){
    										var code = $(this).text();				
    										 DataList.push(String(code));
    									});
    									
    									//Add Product Descriptions To List
    									$(this).find("prd_description").each(function(){
    										var description = $(this).text();				
    										 DataList.push(String(description));
    									});
    								});
    							break;
    							default:
    								alert("No Products Available Currently!");
    							break;
    						 }	
    					}
    				});
    			}
    		});

    Wednesday, August 15, 2018 1:53 PM

Answers

  • User-893317190 posted

    Hi UOKSoftware,

    Because you haven’t say what problem you have meet  and you haven’t provide your  html mark and your xml file , I have made a substitution  for your html mark  and xml file.

    I find your code   

    $( function populate2 () 
    			{
    				$( "#txt_search" ).autocomplete({ source: DataList});
    			} );
    

    will cause Uncaugth ReferenceError: populate2 is not defined.

    So I change it to 

    function populate2 () 
    			{
    				$( "#txt_search" ).autocomplete({ source: DataList});
    			} 
    

    Below is my code.

    <form id="form1" runat="server">
          
            <input type="text" name="name" value="" id="txt_search" />
    
            <select id="filter">
                <option>Workforce</option>
                <option>default</option>
            </select>
        </form>
    
    
    </body>
    
        <script>
            $(document).ready(function() 
            {
                var DataList = [];
    			BuildDataList();
    			
               $("input").on("keypress", function () {
                   populate2();
                   
                });
    			$("select").on("change", function() {	
    				DataList = [];
    				BuildDataList();	
    				populate2();
    			});
    
    			
    		function populate2 () 
    			{
    				$( "#txt_search" ).autocomplete({ source: DataList});
    			} 
    
    function BuildDataList() {
    				$.ajax({
    					type: "GET",
    					async: false,
    					//url: "XML_F52E2B61-18A1-11d1-B105-00805F49916B13.xml",
    					url: "/javascript/XMLFile1.xml",
    					cache: false,
    					dataType: "xml",
    					success: function(xml) {
    						 var filter = $('#filter :selected').text();				 
                            	 
    						 switch (filter)
    						 {
    case "Workforce":
    								$(xml).find('Workforce Product').each(function()
    								 {
    									//Add Product Names To List								 
    									$(this).find("prd_name").each(function(){
    										var name = $(this).text();				
    										 DataList.push(String(name));
    									});
    									
    									//Add Product Codes To List
    									$(this).find("prd_code").each(function(){
    										var code = $(this).text();				
    										 DataList.push(String(code));
    									});
    									
    									//Add Product Descriptions To List
    									$(this).find("prd_description").each(function(){
    										var description = $(this).text();				
    										 DataList.push(String(description));
    									});
    								});
    							break;
    							default:
    								alert("No Products Available Currently!");
    							break;
                            }	
                            
    					}
    				});
    			}
    		});
            
            
    
            </script>
    
    

     The result.

    If  you don’t mean this , please specify your problem and post your html mark  and xml file.

    Best regards ,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 16, 2018 5:11 AM