Hi All
I have a form that has a field where the user starts typing and then results show and narrows down until they get the option they want.
This is working fine… it shows the categoryName correctly and has a hidden id.
I want to pass the id when the form is submitted however it is passing the categoryName instead.
The form field is:
<div class="form-floating mb-2">
<input class="form-control bs-autocomplete" placeholder="Directory Category..." type="text" name="categoryID" id="directoryCategory" data-hidden_field_id="categoryID" data-item_id="id" data-item_label="categoryName" autocomplete="off" autofocus>
<label for="directoryCategory">Directory Category...</label>
<div style="padding-left:0.75em; padding-top:0.5em;"><small><strong>NOTE</strong>: start typing to find a category or <a href="#" data-bs-toggle="modal" data-bs-target="#categoryList">click or tap here</a> for a full list.</small></div>
</div>
The Javascript is:
<script>
$(document).ready(function() {
$.widget("ui.autocomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var that = this;
ul.attr("class", "nav nav-pills nav-stacked bs-autocomplete-menu");
$.each(items, function(index, item) {
that._renderItemData(ul, item);
});
},
_resizeMenu: function() {
var ul = this.menu.element;
ul.outerWidth(
Math.min(
ul.width("").outerWidth() + 1,
this.element.outerWidth()
)
);
},
});
(function() {
"use strict";
var returedInformation = [
{ "id": 7, "categoryName": "Accountant" },{ "id": 4, "categoryName": "Bookkeeper" },{ "id": 1, "categoryName": "Carpenter" },{ "id": 5, "categoryName": "Fashion" },{ "id": 2, "categoryName": "Plumber" },
];
$('.bs-autocomplete').each(function() {
var _this = $(this),
_data = _this.data(),
_hidden_field = $('#' + _data.hidden_field_id);
_this.after('<div class="bs-autocomplete-feedback form-control-feedback"><div class="loader">Loading...</div></div>')
.parent('.form-group').addClass('has-feedback');
var feedback_icon = _this.next('.bs-autocomplete-feedback');
feedback_icon.hide();
_this.autocomplete({
minLength: 1,
autoFocus: true,
source: function(request, response) {
var _regexp = new RegExp(request.term, 'i');
var data = returedInformation.filter(function(item) {
return item.categoryName.match(_regexp);
});
response(data);
},
search: function() {
feedback_icon.show();
_hidden_field.val('');
},
response: function() {
feedback_icon.hide();
},
focus: function(event, ui) {
event.preventDefault();
},
select: function(event, ui) {
_this.val(ui.item[_data.item_label]);
_hidden_field.val(ui.item[_data.item_id]);
event.preventDefault();
},
}).data('ui-autocomplete')._renderItem = function(ul, item) {
return $("<li>")
.append('<div style="padding-left:0.75em; padding-top:0.25em; padding-bottom:0.25em;">' + item[_data.item_label] + '</div>')
.appendTo(ul);
};
});
})();
});
</script>
All the other code is there to make this run and, as mentioned, it is running fine it is just passing the categoryName instead of the id.
I think is this something that just needs a small tweak however I have spent all afternoon on it and just can’t get it working.
Any help would be great.
Many Thanks
mrmbarnes
