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
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");
});
}
});
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.
I am doing a project. In one case I need to dynamically add input fields. In that case, for the first input field transliteration is working. For the second input field onwards transliteration is not working. Because transliteration id works only for one input field. So, how can I able to change id of input field and transliteration id dynamically? I am beginner in javascript and I am not able to sort out the problem. Please help me.
So, the code for dynamically adding input fields is
<div class="row" v-for="(book, index) in seziure" :key="index">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date </label>
<input type="date" class="form-control" v-model="book.date" >
</div>
</div>
<div class="col-md-8">
<div class="form-group label-floating">
<label class="control-label"> Details</label>
<input type="text" class="form-control" v-model="book.details" id="transliterateTextarea2">
</div>
</div>
</div>
<a #click="addNewRow">Add Another </a>
So, whenever I clicks Add Another #addNewRow I am getting a new input field but transliteration is not working. I think problem arises because id="transliterateTextarea2" works for only one input field.
So, when I click on #addNewRow how can I able to change the transliteration id.
My script is
addForm = new Vue({
el: "#addForm",
data: {
seziure:[
{
date: null,
details: null,
},
],
},
methods: {
addNewRow: function() {
this.seziure.push({ date: null, details: null, });
},
},
})
My transliteration script is
<script type="text/javascript">
// Load the Google Transliterate API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.MALAYALAM],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
var ids = [ "transliterateTextarea2" ];
control.makeTransliteratable(ids);
}
google.setOnLoadCallback(onLoad);
</script>
So, here I have added a transliteration id as var ids = [ "transliterateTextarea2" ];
THIS ID is actually working for first input field only. So, when I click #addNewRow, an input field comes but transliteration is not working
So, when I click on#addNewRow how can I dynamically add id's. So, that I can get transliteration for that input fields too.
Please help me to have an answer.
I need transliteration works for, each new input fields i am adding.
Kindly have a help on the same. Hoping for a help
First thing, you are creating non-unique ids, which is just wrong in html. You should use :id="'transliterateTextarea_' + index". But also your initialization script for transliteration will not register the new input element without rerunning it each time you add an element.
Turn your whole transliteration script into a function and in your addNewRow add something like this:
this.seziure.push({ date: null, details: null, });
this.$nextTick(()=>{yourTransliterationInitializingFunction(this.seziure.length)})
And in yourTransliterationInitializingFunction make sure to use the proper id (that's why we pass the parameter there):
function yourTransliterationInitializingFunction(idNo){
...
var ids = [ "transliterateTextarea_" + idNo ];
...
}
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 want auto complete text box with text and id .I used the following code for auto complete in my application
<script type="text/javascript">
var $auto=$.noConflict();
$auto(document).ready(function(){
var data3 = ['niju','vivek','anil','Anil'];
$auto("#employee").autocomplete(data3);
});
</script>
<input type="text" name="employee" id="employee" value="" class="inp-form">
In this code we faced one drawback .There can be duplicate entry is possible since the same values as been repeated .
How to get id value instead of text label ?
Any suggestions are highly appreciated.
Demo Here
You can try with a source define like : [ { label: "Choice1", value: "value1" }, ... ].
See documentation here : autocomplete#option-source
In your case it would be something like :
var data3 = [{label: 'niju', value: 1},{label : 'vivek', value : 2}, ...];
$auto("#employee").autocomplete({source: data3});