I want to use 2 functions on one input field. But only the tagsinput works.
Function 1 = Bootstrap tagsinput
Function 2 = jquery autocomplete
Sources:
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
Tried applying the autocomplete on .autotest instead of #tagsearch but that doesn't do anything either.
<input type="text" data-role="tagsinput" name="tagsearch" class="autotest" id="tagsearch" value="" placeholder="Zoek op functie">
JS code:
//Var to set for maximum tags we allow
$iMaximumTags = 5;
//Maximum of 5 tags
$('#tagsearch').tagsinput({
maxTags: $iMaximumTags,
trimValue: true
});
//Autocomplete test
var countries = [
{ value: 'Andorra', data: 'AD' },
// ...
{ value: 'Zimbabwe', data: 'ZZ' }
];
$('#tagsearch').autocomplete({
lookup: countries,
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});
When I remove the tags input code the autocomplete works.
There are no JS errors.
If the autocomplete code is above the tags input, still only the tags input works.
Instead of serching for id (#tagsearch) change:( $('#tagsearch').autocomplete({ and $('#tagsearch').tagsinput({ )with( $('.text').autocomplete({ and $('.text').tagsinput({
it should works.
Related
I'm using selectize for my drop down menus and I'm trying to do form validation. Each of the menus has class .code_select, and I want to know if an option has been selected on all of them. My code should determine if something is selected, and if not add the ID of the dropdown to an array called empty_fields. However, my dropdowns are all ending up in the array whether they have a selected option or not. This is my code:
$(".code_select").each(function(){
if ($(this).find('option:selected').length === 0) {
empty_fields.push($(this).attr("id")+'-selectized');
submitForm=false;
}
});
An example of one of the inputs:
<div class='col-4'>
<input type='text' class='form-control code_select' id='5-tree-Betpap-stdCodeSelect' name='5-tree-Betpap-stdCode' aria-label='Tree Metric Field 5 Standard Code select'>
</div>
And my selectize initialization:
// initialize newCodes selectize control
newCodesSelect[index] = $(this).selectize({
valueField: 'id',
labelField: 'label',
create: false,
hideSelected: false,
options: listOptions[listType],
searchField: 'label',
placeholder: "Choose " + listType + " codes (type to search)",
maxItems: 1,
});
//This stores the selectize object to a variable
newCodesSelectize[index] = newCodesSelect[index][0].selectize;
How do I determine if the select is still on the "placeholder" when my placeholder has a variable?
Thank you!
OK, here is what worked for me. I had to use .selectize-control as the selector and find if any of the items have data-attribute=null.
$('#nextBtn').click(function() {
console.log("Next Button - adding hidden fields");
//remove any left over error formatting
$('.requiredField').removeClass('requiredField');
var fld_text="";
$('#error-messages').html(fld_text);
// validate form before submit
var empty_fields=[];
var submitForm=true;
$(".code_description").each(function(){
if ($(this).val()==="") {
empty_fields.push($(this).attr("id"));
submitForm=false;
}
});
$(".selectize-control").each(function(){
if ($(this).find(".item").attr('data-value') == null) {
empty_fields.push($(this).prev("input").attr("id")+'-selectized');
}
});
empty_fields.forEach(function(element) {
if (element!=="undefined-selectized") submitForm=false;
});
if (submitForm===true) {
$('#nextForm').submit();
}
else {
fld_text="<p>Review required fields</p>";
$('#error-messages').html(fld_text);
empty_fields.forEach(function(element) {
if (element!=="undefined-selectized") $("#"+element).addClass("requiredField");
});
}
});
So these past days I've been trying to load data into the selectize.js input, which I've tried many ways and it does not work.
I tried the tags[{}]; way but in only works with strings inside.
Example: tags = [
{text: "science"},
{text: "biology"},
{text: "chemistry"},
{text: "physics"}
];
<!------ Hidden Input with the tags queried from the database ------>
<?php
$alltags="";
foreach ($tags as $tag ) {
$alltags.=$tag['name'].".";
}
?>
<input type="text" style="display:none" value="<?php echo $alltags; ?>" id="hiddeninput_tags">
<!----------------------------------------------------------------->
<!------ JavaScript Function ------>
function sendtags()
{
var rawtags = $('#hiddeninput_tags').val();
var res = rawtags.split(".");
res.forEach(function(entry) {
//alert(tags); If I remove this from comment, when I load the page it will alert all the tags inside the hidden input.
});
}
<!--------------------------------->
<!------ Selectize Function ------>
$('#input-tags').selectize({
plugins: ['restore_on_backspace', 'remove_button'],
delimiter: ',',
persist: false,
options: tags,
valueField: 'text',
create: function(input) {
return {
value: input,
text: input
}
},
render: {
option_create: function(data, escape) {
var addString = 'Adicionar';
return '<div class="create">' + addString + ' <strong>' + escape(data.input) + '</strong>…</div>';
}
}
});
<!-------------------------------->
I expect the input from selectize to have all the values queried from the database inserted into the value of that "selectize input" so it can suggest the tags that already exist in the database.
Hi #NeonSilver instead of using "" in your string use '' single quotes to make your input value.
Your provide code is displaying like -
<input type="text" style="display:block" value="[{text: " science"},{text:="" "biology"},{text:="" "chemistry"},{text:="" "physics"}]" id="hiddeninput_tags">
but it should be like this -
<input type="text" style="display:block" value='[{text: " science"},{text:="" "biology"},{text:="" "chemistry"},{text:="" "physics"}]' id="hiddeninput_tags">
now you can easily get the tag value.
I am trying to optimize a dropdown selection bar to typeahead autocomplete using twitter's typeahead. When I implemented twitter's typeahead, I couldn't preserve the value which user selected or type it after refreshing the page. Also, when I try to submit the form I am working on, it seems like it's never recorded as a value field.
This is my code :
Substring matcher for autocomplete and suggestion
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
matches = [];
substrRegex = new RegExp(q, 'i');
jQuery(function ($){
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});
cb(matches);
});
};
};
Typeahead
var Array = [];
jQuery(function ($) {
$(document).ready(function(){
$('#project').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'Projects',
source: substringMatcher(Array)
});
});
});
html
<c:forEach items="${Form.projectList}" var="val">
<script type="text/javascript">
var Projects = "${val.project}";
Array.push(Projects);
</script>
</c:forEach>
<div id="the-basics">
<input id = "project" class="typeahead" type="text" placeholder="Projects">
</div>
Can anyone give me any suggestions on how I should figure out this problem ?
… when I try to submit the form I am working on, it seems like it's never recorded as a value field.
Your input element is missing a name attribute, which is required for the input’s value to be sent when the form is submitted. Try using this HTML:
<input id="project" name="project" class="typeahead" type="text" placeholder="Projects">
I am not sure if this will also solve the problem where the value is lost when the page refreshes, or if that requires an additional solution.
I am getting data from server and loading them to JQuery auto suggest. It's works fine. But I don't know how to configure it. I Initialize my text box to it. Now i need when user select one value from it, He will be not able to choose another value of he cant enter a word, except he can delete old value.
Here is my code :-
$(document).ready(function(e){
//handle auto suggestion when compose message
var user_ids = {};
//var hidden_user_ids = $('input:hidden[name=user_ids]');
var url = '/account/insiderName';
var conf = {
selectedItemProp: 'name',
searchObjProps: 'name',
asHtmlID: 'insider_ids',
neverSubmit: true,
multiSelect: false,
preFill: ',' //, {{attributes: {name: 'joe', value: '12345'}, num: '1'}},
};
$('.insiderUser').autoSuggest(url, conf);
});
Here is my text Box Code:-
<div class="field to"><input type="text" name="toInsider" value="" class="insiderUser"/></div>
Add this configuration option also:
selectionLimit: 1
since it defaults to false, which means no limit.
From the docs: https://github.com/wuyuntao/jquery-autosuggest
I use select2 plugin and get values when user typing least 3 character. Get data from php as json like this;
"1":"val1" , "5":"val2" , "19":"val3"....
I want to store id values of selected items at hidden input and when user remove any selected item, the id of removed item also remove from hidden input. For example;
When val1 and val2 items are selected like below, value of hidden input (id which 'hdn-id') change like below, also.
<input type="hidden" id="hdn-id" val="1,5" />
And when val1 is removed, id of this item (1) removed from hidden input like this ;
<input type="hidden" id="hdn-id" val="5" />
But I can't do this. My codes;
SELECT2:
function selectAjax(element,url,hiddenElement) {
var selectedItemsArray = []
$('#'+element).select2({
multiple: multi,
id: function(element) {
return element
},
ajax: {
url: url,
dataType: 'json',
data: function(term,page) {
return {
term: term,
page_limit: 10
};
},
results: function(data,page) {
var titleArr = [];
$.each(data, function(k,v){
titleArr.push(k+':'+v);
});
return {
results: titleArr
};
}
},
formatResult: formatResult,
formatSelection: formatSelection,
});
function formatResult(data) {
return '<div>'+data.substr(data.indexOf(':')+1)+'</div>'
};
function formatSelection(data) {
var id = data.split(':',1),
text = data.substr(data.indexOf(':')+1),
hiddenElementValue = eval([jQuery('#'+hiddenElement).val()]);
selectedItemsArray.push(id);
jQuery('#'+hiddenElement).val(selectedItemsArray);
return '<div data-id="'+id+'" class="y-select2-selected-items">'+text+'</div>';
};
}
selectAjax('select2-element','ajx.php','hdn-id');
HTML:
<input type="text" id="select2-element" />
<input type="hidden" id="hdn-id" />
I can store ids at hidden input with above code but when remove an item I can't remove id from hidden input. Because plugin assign 'return false' to element's onclick event. I handed the job with above codes, I think.How can I be a better solution?
You can use the change event of the select2 plugin and there write some code that will update the value of the hidden input.
$("#select2-item").select2({
//options go here
});
$("#select2-item").on("change", function(e) {
//update hidden input value
});