Link to home
Start Free TrialLog in
Avatar of Dan Schimo
Dan SchimoFlag for United States of America

asked on

jquery easyautocomplete for mutiple text boxes

Hello Experts,

I am using a http://easyautocomplete.com/ code to add autocomplete for multiple text boxes.

 When I choose a value in the text box, a hidden text value is populated this works well for one text box.
When I add a cfloop to populate mutiple text boxes,  a same ID value is being assigned to all the corresponding hidden fields.

I need to get Name in the autocomplete and its corresponding value in the hidden field

Please help.
-Dan


<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<cfinclude template="/JSIIntranet/Inc/_inc_common_easyautocomplete.cfm"/>


<script type="text/javascript">
			$(function() {				
				
var test_arr = $("input[name*='DBLProjectNameNum']");
for(var i=0;i<test_arr.length;i++) {
    alert($(test_arr[i]).attr('id'));
}
						
				var options = {
					url: "GetProjectNumName.cfm",
					getValue: function(element) {
						$("input[name*='DBLProjectID']").val(element.code);						
						return element.name;
					},
					list: {
						match: {
							enabled: true
						}
					}
				};
		
				$("input[name*='DBLProjectNameNum']").easyAutocomplete(options); 
				
				
			});	
		</script>



	</head>	



		
		
		
		<cfset OfficeProjectID = "Choose One " />
<cfoutput>
<form action="TestAutocompleteaction.cfm" method="post">
			
<cfloop from="1" to="4" index="k">

<div> 
			<input type="text" 
                   name="DBLProjectNameNum_#k#" 
                   id="DBLProjectNameNum_#k#" 
                   value="#OfficeProjectID#" 
                   size="60" 
                   maxlength="255" 
				   title="Enter the name of the staff photographer and not the name of the project."                    
                 />
				  <input type="hidden" name="DBLProjectID_#k#" id="DBLProjectID_#k#" value="#OfficeProjectID#" />
				<br>  
</div>			      
				  
		</cfloop>	

		<input type="submit" value="Submit">
</form></cfoutput>

Open in new window

Avatar of _agx_
_agx_
Flag of United States of America image

$("input[name*='DBLProjectNameNum']").easyAutocomplete(options);

I think you need to apply to each element, ie

   $("input[name*='DBLProjectNameNum']").each(function(){
		$(this).easyAutocomplete(options); 
   });

Open in new window

Avatar of Dan Schimo

ASKER

sorry, still getting same value in all the DBLPROJECTID_1 fields :(

User generated image
Yeah, I can see it's due to the inner reference to the project id needing to be dynamic. Sorry, I'm not coming up with anything workable right now. Since this is really about jQuery, maybe update your question to include a static html example?  That'd draw more attention from the jQuery folks.  (Sorry I couldn't be of more help, but my brain is shot .. )
Thank you _agx, will do it
adding static html here
		
			
			




<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>




<link rel="stylesheet" href="/Managed/Javascript/easyAutoComplete/css/easy-autocomplete.css" />
<script src="/Managed/Javascript/easyAutoComplete/js/jquery.easy-autocomplete.js"></script>



<script type="text/javascript">
			$(function() {				
			
				var options = {
				
					url: "GetProjectNumName.cfm",
					getValue: function(element) {
						//$("input[name*='DBLProjectID']").val(element.code);						
						
						alert(this.id == 'myButton');
						
						
						return element.name;
					},
					list: {
						match: {
							enabled: true
						}
					}
				};
		
				//$("input[name*='DBLProjectNameNum']").easyAutocomplete(options); 
				
				 $("input[name*='DBLProjectNameNum']").each(function(){
					$(this).easyAutocomplete(options); 
			   });
				
				
			});	
		</script>



	</head>	



		
		
		
		

<form action="TestAutocompleteaction.cfm" method="post">
			


<div> 
			<input type="text" 
                   name="DBLProjectNameNum_1" 
                   id="DBLProjectNameNum_1" 
                   value="Choose One " 
                   size="60" 
                   maxlength="255" 
				   title="Enter the name of the staff photographer and not the name of the project."                    
                 />
				  <input type="hidden" name="DBLProjectID_1" id="DBLProjectID_1" value="Choose One " />
				<br>  
</div>			      
				  
		

<div> 
			<input type="text" 
                   name="DBLProjectNameNum_2" 
                   id="DBLProjectNameNum_2" 
                   value="Choose One " 
                   size="60" 
                   maxlength="255" 
				   title="Enter the name of the staff photographer and not the name of the project."                    
                 />
				  <input type="hidden" name="DBLProjectID_2" id="DBLProjectID_2" value="Choose One " />
				<br>  
</div>			      
				  
		

<div> 
			<input type="text" 
                   name="DBLProjectNameNum_3" 
                   id="DBLProjectNameNum_3" 
                   value="Choose One " 
                   size="60" 
                   maxlength="255" 
				   title="Enter the name of the staff photographer and not the name of the project."                    
                 />
				  <input type="hidden" name="DBLProjectID_3" id="DBLProjectID_3" value="Choose One " />
				<br>  
</div>			      
				  
		

<div> 
			<input type="text" 
                   name="DBLProjectNameNum_4" 
                   id="DBLProjectNameNum_4" 
                   value="Choose One " 
                   size="60" 
                   maxlength="255" 
				   title="Enter the name of the staff photographer and not the name of the project."                    
                 />
				  <input type="hidden" name="DBLProjectID_4" id="DBLProjectID_4" value="Choose One " />
				<br>  
</div>			      
				  
			

		<input type="submit" value="Submit">
</form>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
another one :
    <script>
        $(function() {

            var options = {
                url: "GetProjectNumName.cfm",
                getValue : "name",
                list: {
                    match: {
                        enabled: true
                    }
                }
            };

            $("input[name*='DBLProjectNameNum']").each(function() {
                var thisID = $(this).attr("id");
                var DBLProjectID = $(this).next("input[name*='DBLProjectID']").attr("id");
                options.list.onChooseEvent = new Function("$('#" + DBLProjectID  + "').val($('#" + thisID + "').getSelectedItemData().code);");
                $(this).easyAutocomplete(options);
            });

        });
    </script>

Open in new window

Thank you leakim971
Thanks leakim971.  I'd tried something similar, but couldn't quite get it right. Thanks for stepping up :)