Dan Schimo
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
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>
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 .. )
ASKER
Thank you _agx, will do it
ASKER
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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>
ASKER
Thank you leakim971
Thanks leakim971. I'd tried something similar, but couldn't quite get it right. Thanks for stepping up :)
I think you need to apply to each element, ie
Open in new window