First, sorry about the title of this question. I thought about it for a long time and could do no better.
My question is: can jQueryUI's autocomplete feature provide suggestions from multiple database fields under one autocomplete field. For instance, I'd want to be able to type in "br" in the field and have both "briman057" and "Brian Johnson" appear as suggestions even though they are stored in separate database fields and are returned as two separate key value pairs of the same JSON item (ie. [{username : briman057, name : 'Brian Johnson']}). I'd then want the username value to be the one that populates the field when either it or the full name are selected. I know that one of the keys needs to be named "value" or "label" and that the key by that name is the one that is used to provide suggestions, but can I essentially have two "value" keys for one JSON item?
Yes, it can, because you provide your own custom callback as a datasource. That callback can implement the behaviour you desire.
Here's a demo of what I think you want.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(function() {
$('#myautocomplete').autocomplete({
source: function(request, response) {
// TODO: make suggestions actually depend on what the user types into the search box.
// You want two suggestions, one with 'briman57' and one with 'Brian Johnson', so we need two suggestions with different labels, but with the same value.
var suggestions = [
{ label: 'briman057' , value: 'briman057', username : 'briman057', name : 'Brian Johnson'},
{ label: 'Brian Johnson', value: 'briman057', username : 'briman057', name : 'Brian Johnson'}
];
response(suggestions);
},
select: function( event, ui ) {
alert('You have selected ' + ui.item.name + ' (' + ui.item.username + ')');
}
});
});
</script>
<input id="myautocomplete" title="Enter anything here."></input>
Take a look at the source code of the Remote JSONP datasource example for more inspiration.
Related
I want jquery or javascript code to get the data from excel and add them to array in jquery.
Example:
In column "A" there are names,
Kasun
Nirmala
Gemba
John
And I want to add then to
Var names=['Kasun', 'Nirmala','Gemba','John']
This is what I have tried. In this I get all data of excel to #res div. But I want to get them all to an array
alasql('SELECT * into html("#res") from xlsx("excel.xlsx")');
<script type="text/javascript" src="js/alasql.min.js"></script>
<script type="text/javascript" src="js/xlsx.core.min.js"></script>
<div id="res"></div>
You need to make a new cell in your excel file and use concatenate, there is a function helper the parts would be like:
FirstName, SecondName
=CONCATENATE("'",A1,"', ",B1,"'")
Will give you
'FirstName', 'SecondName'
Then wrap in square brackets
['FirstName', 'SecondName']
If your names are in a list even better just do:
=CONCATENATE("'",A1,"', ")
Then copy the formula across all rows, so you have something like:
'FirstName',
'SecondName',
'ThirdName',
Remove the last comma and wrap in square brackets again
['FirstName',
'SecondName',
'ThirdName']
Add this to your page
var names = ['FirstName',
'SecondName',
'ThirdName']
I'm using the tablesorter search/filter plugin to search names from a list. so when i type in a letter corresponding to the letters in the list will display. I used this: http://mottie.github.io/tablesorter/docs/example-widget-filter-external-inputs.html as a reference.
Below is my code:
var $table = $('#table').tablesorter({
sortList: [[0,0], [1,0]],
theme: 'blue',
widgets: ["zebra", "filter"],
widgetOptions : {
filter_columnFilters: false,
filter_saveFilters : true,
}
});
$.tablesorter.filter.bindSearch( $table, $('.search-subaccounts') );
HTML:
<input class="search-subaccounts" type="search" data-column="1"/>
I'm trying to filter names based on first name.
so when i try to execute it, gives me the following error:
Uncaught TypeError: Cannot read property 'bindSearch' of undefined
I dont know why it says 'filter' is undefined whereas i tried executing exactly the way its in the demo. What did i do wrong here?
Any ideas??
It sounds like the widget file isn't being included since the bindSearch function isn't being found - it's included with the filter widget. Make sure you load the following files on your page (theme file name will vary depending on your choice):
<link rel="stylesheet" href="css/theme.blue.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.min.js"></script>
In my application I have a <p:dataTable> with attributes lazy="true" paginatorTemplate="...{RowsPerPageDropdown}..." rowsPerPageTemplate="10,50,100"
I set value attribute of this datatable from a lazyDataModel. I got total no of records of this dataModel by dataModelName.getRowCount() .
Now problem is I want to show rowsPerPageTemplate="10,20,50,ALL" where ALL stands for total no of records of dataModel (ie. dataModelName.getRowCount()).
If anyone know this please help me. Thanks.
My approach is change to ALL in clientside by using jquery or javascript.
I have one form(id="form") and one datatable(id="cars") inside(you try the link ALL first):
<script type="text/javascript">
$(document).ready(function() {
$('#form\\:cars .ui-paginator-rpp-options.ui-widget.ui-state-default.ui-corner-left')
.each(function() {
$(this).children().last().html('ALL');
});
})
</script>
rowsPerPageTemplate="8,16,{ShowAll|'All'}"
I got a currency exchange script from coinmill. I want to modify it to work nice in my page. I am a newbie in html/javascript programming thats why i am asking help on this one, pls.
<script src="http://coinmill.com/frame.js"></script>
<script>
var currency_round=true;
var currency_decimalSeparator='.';
var currency_thousandsSeparator=',';
var currency_thousandsSeparatorMin=3;
</script>
$199.00 (US) = <script>currency_show_conversion(199.00,"USD","GBP");</script> GBP<br>
<small>Currency data courtesy coinmill.com</small>
This scripts works fine but shows the conversion for the default value in the script. I need to replace the value ($199.00) to a value from a textbox of id "edit_1". Automatically after the user inserts the currency to exchange, the value will show in the page.
Thanks in Advance.
I am Stephen Ostermiller, and I run http://coinmill.com/. You can make this work with the JavaScript currency API from Coinmill:
Put on onchange event on the textarea
Get the value from the text area using this.value
use the currency_convert(value,from,to) method that is available in frame.js to convert it into the currency of your choice
Write the value to where you want it in the page, for example with document.getElementById('results').innerHTML
Putting it all together:
<script src="http://coinmill.com/frame.js"></script>
<script>
var currency_round=true;
var currency_decimalSeparator='.';
var currency_thousandsSeparator=',';
var currency_thousandsSeparatorMin=3;
</script>
<textarea id=edit_1 onchange="document.getElementById('results').innerHTML=currency_convert(this.value,'USD','GBP')"></textarea><br>
Converted into GBP:<div id=results></div>
<p><small>Currency data courtesy coinmill.com</small></p>
Whene I enter "273" into the textarea, I then see "Converted into GBP: 176.32" on the page.
You can test out a live example on jsfiddle: http://jsfiddle.net/wAxnq/
I have 3 typeahead fields:
They are as follows:
Country: |___________|
State: |___________|
City: |___________|
Here is the code for the second typeahead field (the rest are similar):
<input type="text" class="span3" style="margin: 0 auto;"
data-provide="typeahead" data-items="4"
data-source="["Alabama","Alaska",
<many more US states>
,"Wyoming"]">
Now ... I need both typeahead fields to look like dropdowns which can be achieved by following instructions here.. no problem.
https://github.com/danielfarrell/bootstrap-combobox
http://dl.dropbox.com/u/21368/bootstrap-combobox/index.html
The question I'm asking pertains to the "Last Option" below:
Note: I am building this in Rails, so ruby code would be nice...
Placeholder Case:
I need each of the drop down lists to have a default placeholder text which is grayed out.
eg:
Country: |_USA_______|
State: |_IOWA______|
City: |_DES MOINES____|
Missing Value Case:
If the user types in a City value that does not exist in the autocomplete, I want to show them a dropdown with a link..
eg: User types in "yahoo" in City field. This should result in the output "That city does not exist, click here to search for it"
Clicking on the above text should redirect me to Google.com
Error Case:
If nothing is selected in the first field (country).. the second field should have a default value in the dropdown: "Please select a Country to begin"
Last Option:
upon successful selection of a City, eg: San Francisco ... I want to make a redirect to a new html file like "mysite.com/datastore/calsan.html" (first three letters from each selection in lowercase appended together)
this final html file will be pre-generated and will have relevant statistics and fun facts about the city "San Francisco"... I'll also have fun facts for other cities pregenerated in the datastore folder.
See my snippets below
Placeholder case
<script type="text/javascript">
$(document).ready(function(){
$('.combobox').combobox({placeholder: "Type Something.."});
});
</script>
Last Option
<script type="text/javascript">
$('.combobox').change(function(){
if($(this).val().length > 0){
var fileName = $(this).val().substr(0,3); // this is for getting the first 3 characters, apply the same logic wherever necessary
window.location("/datastrore/" + fileName + ".html");
}
})
</script>
Last Option
There seems to be a simple way to do this with inline javascript and option value. I think I will be using this simpler way..
http://webdesign.about.com/od/javascript/f/blfaqddredirect.htm
Placeholder Case and All other Cases
http://harvesthq.github.com/chosen/
The above library solves all my issues and is very powerful! Its not for bootstrap but I don't mind until bootstrap has a comparable option.