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});
Related
How do I put two values in an input with jquery?
I already made this code where I put the value of an input in the textarea, but I want it to put the value of the input along with a customized text.
Example:
Custom text: 'The value is' | Typed in the input: '10'
Final result within the textarea:
'The value is 10'
I don't know if I was specific, but whoever can help me thank you :)
$('.payOnDeliveryValor').change(function() {
$('.woocommerce-input-wrapper textarea').val($('.payOnDeliveryValor').val());
});
<input class="payOnDeliveryValor" />
<div class="input-wrapper">
<textarea></textarea>
</div>
You can use simple string concatenation to join the custom text with the input value:
var custom_text = "The value is ";
$('.payOnDeliveryValor').change(function() {
var text = $(this).val();
if (text) text = custom_text + text;
$('.woocommerce-input-wrapper textarea').val(text);
});
HTML:
<select data-ng-options="o.id as o.device for o in deviceList" data-ng-model="selectedDeviceID"></select>
<input type="text" id="deviceWidth" ng-model="deviceList[selectedDeviceID].width" placeholder="width"/>
Data:
$scope.deviceList = [{id: 0, device: 'Apple iPhone 5', width:320,height:568},
{id: 1, device: 'Nokia Lumia 920', width:320,height:533},
{id: 2, device: 'Samsung Galaxy S III', width:360,height:640}]
When I select devicename in dropdown, respective width will be displayed in textbox. It is working fine. But I dont want change the original values, when I change value in textbox.
Simply, I want to show the value in textbox and editable. But I dont want this value to be stored.
You add ng-change="updateDeviceWidthTextbox()" to the select, change the model of the input-field to something like ng-model="deviceWidthTextbox" and in the controller you implement the function:
$scope.updateDeviceWidthTextbox = function() {
$scope.deviceWidthTextbox = deviceList[selectedDeviceID].width;
};
May be i didn't understand you correctly. Hope I could help you.
<select ng-change="changed(selectedDeviceID)" data-ng-options="o.id as o.device for o in deviceList" data-ng-model="selectedDeviceID"></select>
<input type="text" id="deviceWidth" ng-model="inputText" placeholder="width"/>
In your controller
$scope.changed = function (selectedDeviceID) {
$scope.inputText = $scope.deviceList[selectedDeviceID].width
});
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
WYSIWYG = What you see is what you get.
Some Info:
Let's say I have 2 Text Boxes and one Label: Textbox1, Textbox2, Label.
For, let's say, a Custom ID I want to provide a text and a number. These two are combined to create the ID: Prefix + Integer.
Label.text = Textbox1.Text + Textbox2.Text"
But that is not what I'm interested in.
The Question:
How would I go about making a JavaScript to make "as you type" functionality to display on the result on label to show the user what their Custom ID would look like?
I hope this is what you were looking for.
HTML:
<label id="lab">My label:</label><br><br>
Prefix: <input type="text" id="txtarea1"><br>
Number: <input type="text" id="txtarea2">
JS:
document.getElementById("txtarea1").onkeyup = function() {
document.getElementById("lab").innerHTML = document.getElementById("txtarea1").value + document.getElementById("txtarea2").value;
}
document.getElementById("txtarea2").onkeyup = function() {
document.getElementById("lab").innerHTML = document.getElementById("txtarea1").value + document.getElementById("txtarea2").value;
}
Fiddle.
I have a jquery template with N radio buttons and I need to select radio button with value that I pass after loading template from external html file(using jQuery.tmpl() method). Is there a good way of selection of radio button in template without multiple {{if}}, {{else}} statements, duplicate code and selectors?
In what format is your data coming back from the server? If it's a JSON array, could you do something like this?
html:
<script id="myTemplate" type="text/html">
<input type="radio" value="${value}"{{if selected}} checked{{/if}}>${name}</input><br />
</script>
<div id="myDiv">
</div>
javascript:
var myData = [
{name: 'test 1', value : 'radio1', selected : false},
{name: 'test 2', value : 'radio2', selected : false},
{name: 'test 3', value : 'radio3', selected : true},
{name: 'test 4', value : 'radio4', selected : false}
];
$('#myTemplate').tmpl(myData).appendTo('#myDiv');
http://jsfiddle.net/JbTwB/1/
If you have the value of the desired radio, you could do something like:
jInstance.find('input[value=' + desiredValue + ']').attr('checked', true);
This assumes that jInstance is the newly-created copy of the template, and that desiredValue exactly matches the value of the radio button you'd like to be pre-selected.
If you only know part of the value, there are other jQuery selectors you can use to target that input.
If you're looking for a more general "form pre-filling" routine, you'll need to establish some kind of format for storing the set of pre-fill values, and a mapping from that format to the template. But it can be done, and it's not necessarily that hard, either.