I build an autocomplete function with jQuery and it's working fine but now I want to design the suggestion box which appears if you type in something. I also want to make some changes like how many results should be displayed.
$(function() {
$("#search_input").autocomplete({
source: "request",
select: function (event, ui) { //item selected
AutoCompleteSelectHandler(event, ui)
},
minLength: 3,
});
});
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
}
This is my jQuery function
This is how the suggestion box looks like.
How can I design it ? I also want to adjust the amount of results which I get displayed.
I was able to adjust the amount of results which I get displayed by filtering them in my python script.
Related
I've this issue I didn't see during development but it happens to my client. I use jQuery DataTables to let the user complete with information.
On a big/normal resolution this does not happened because the DataTables can show all the columns. But on lower resolution the grid shows a green plus button and the controls "inside" that group are not initialized correctly.
Normal page with lower resolution:
Using the Chrome Dev Tools' Console: I can excecute this:
$(".k_numeric").kendoNumericTextBox({ format: "c", decimals: 2 });
And the controls now are display correctly.
So it seems that when the DataTables hides columns to fit on the display, the controls are not being called by JS. I tried searching about this but I don't even know how to search it properly.
CAUSE
This issue occurs because Responsive extension creates new elements when preparing row details. These new elements need to be initialized again.
SOLUTION
You need to re-initialize those controls that become part of row details in a separate function.
The solution is to:
define a custom render for the row details with responsive.details.renderer option
call default renderer with $.fn.DataTable.Responsive.defaults.details.renderer() which returns jQuery collection.
initialize custom controls in this collection before returning it.
Example:
var table = $('#example').DataTable({
responsive: {
details: {
renderer: function (api, rowIdx, columns) {
var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);
$(".numerictextbox", $details).kendoNumericTextBox({ format: "c", decimals: 2 });
return $details;
}
}
},
createdRow: function( row, data, dataIndex ){
$(".numerictextbox", row).kendoNumericTextBox({ format: "c", decimals: 2 });
}
});
DEMO
See this jsFiddle for code and demonstration.
LINKS
See jQuery DataTables – Responsive extension and custom controls article for more information.
I'm updating an html5 datalist dynamically, as the user types, with the following script:
$('#place').on('keyup', function() {
$.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() }).done(function(response) {
$('#autocomp-places').html(response);
});
});
Which works fine except that the datalist often doesn't show right away. When I inspect the element the html is there but the datalist is not shown as soon as it's updated. How can I force it to show?
For the record: it works... I just wish it would always show the new suggestion right away.
Please use success instead of done method of ajax and try again.
$('#place').on('keyup', function () {
$.post('content/php/autocomp.php', {
field: 'plaats',
val: $('#place').val()
}).success(function (response) {
$('#autocomp-places').html(response);
});
});
I think I just have found a decent workaround for this!
Here is my pseudo-code:
As I type, I make async httprequests to get data.
When data is returned, i clear and re-populate the datalist.
If the current input field is still focused, manually call .focus() on the input element (this seems to force the data-list popup behavior to occur).
First, I would try to use one of already available solutions such as the jQuery UI autocomplete. It will shorten your development time and make the code free of typical bugs (not to mention getting the benefits from someone else work in the future).
If you really want to create your own version, I would make sure the list is cleared and repopulated with the following code:
$('#place').on('keyup', function() {
var posting = $.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() });
posting.done(function(data) {
$('#autocomp-places').empty().append(data);
});
});
how can I display data point on bar in barchart?
I don't want to use datatip or tooltip which will highlight data points only when they are moused over.
I want to display the data point always on the bar.
is there any right way to get it?
thanks.
I want exactly like this
following is my code
<p:barChart id="barChartId" value="#{myBean.myModel}"
orientation="horizontal"
stacked="true" extender="ext" animate="true" shadow="false" />
<h:outputScript>
function ext() {
this.cfg.highlighter = {
useAxesFormatters: false,
tooltipAxes: 'x'
};
this.cfg.legend = {
show: true,
location: 'ne',
placement: 'outside'
};
this.cfg.seriesDefaults = {
pointLabels : { show: true },
};
}
</h:outputScript>
here, highlighter and legend are working fine but point labels are not displaying on bar
Not sure if it will work...
Use the extender of the <p:barChart , like this:
<p:barChart value="#{myBean.myModel}" widgetVar="myBarChart" extender="my_ext"/>
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
renderer:$.jqplot.BarRenderer,
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
or this
<script type="text/javascript">
function my_ext() {
this.cfg.seriesDefaults = {
pointLabels: {show: true}
};
this.cfg.stackSeries: true;
}
</script>
Also take a look at the jqplot examples : Bar charts
Just in case someone doesn't crawl through the comments of the marked answer, as I didn't do in the first place.
The problem basically is not the configuration of the pointLabelselement, but rather that primefaces (as of 4.0) in its original state does not ship with the needed plugin of jqPlot included.
Therefore actually the solution is to make the needed plugin jqplot.pointLabels.min.js available. From a ticket in the bug tracker (http://code.google.com/p/primefaces/issues/detail?id=5378) I extracted, that primefaces uses jqPlot version 1.0.8.
download jqplot 1.0.8 from https://bitbucket.org/cleonello/jqplot/downloads/
add the plugin to your project (e.g. src/main/webapp/resources/jqplot-plugins)
add the plugin as script to your page (<h:outputScript library="jqplot-plugins" name="jqplot.pointLabels.min.js" />)
I am using the mvc pattern to pull in an autocomplete. I have searched around and apologize if this is a repeat question but I couldnt find my exact case which technically is very straighforward.
I have the following code:
<script type="text/javascript">
$(function() {
$( "#search" ).autocomplete({
source: "remote_bookmark.php?f=autocomplete",
minLength: 3,
select: function( event, ui ) {
ui.a.val;
ui.b.val;
ui.c.val;
ui.d.val;
}
});
});
</script>
this calls the remote page which calls a sql query in the model. The information is put into a multidimensional array that looks like the following in the model:
array_push($bookmark_array, array($row['a'],$row['b'], $row['c'], $row['d'], $row['e']));
I then echo the json_encode in the remote and after looking at the documentation still dont seem to follow how I am supposed to put the information in the select:
$( "#search" ).autocomplete({
source: "remote_bookmark.php?f=autocomplete",
minLength: 3
});
You do not need a select function unless you want to add extra functionality that is npt already there.
Just change your php to:
$bookmark_array = array($row['a'],$row['b'], $row['c'], $row['d'], $row['e']);
echo json_encode($bookmark_array);
And you should be all fine and dandy :-)
I have a jQuery datepicker function bound to the "birthday" input html element, written in the page header:
<script type="text/javascript">
$(function() {
$( "#birthday" ).datepicker();
});
</script>
Next, I have some AJAX functionality - it adds new input html element to the page. That element is:
<input type="text" id="birthday" value="" class="detail-textbox1" />
Clicking on that birthday element does not pop up the date picker below the text field. I expected this, as the element is added after the page is loaded, thus it isn't in relation with the function provided in the header.
How can I make it work? I tried moving the script from the header to the body, but nothing seems to work. Thanks.
P.S. If I create an input html element with id="birthday" in the page body, everythig works as expected. It appears that only the elements added through AJAX are dysfunctional.
I'm a bit late to the party, but for thoroughness - and with the .live() function being deprecated from jQuery 1.7 onwards - I thought I'd provide an updated solution based on my experiences, and from all the help I got from other answers on StackOverflow!
I had a situation where I needed to add the datepicker functionality to input fields that were being added to the DOM through AJAX calls at random, and I couldn't modify the script making the AJAX calls to attach the datepicker functionality, so I opted for the new shiny .on() function with its delegation features:
// do this once the DOM's available...
$(function(){
// this line will add an event handler to the selected inputs, both
// current and future, whenever they are clicked...
// this is delegation at work, and you can use any containing element
// you like - I just used the "body" tag for convenience...
$("body").on("click", ".my_input_element", function(){
// as an added bonus, if you are afraid of attaching the "datepicker"
// multiple times, you can check for the "hasDatepicker" class...
if (!$(this).hasClass("hasDatepicker"))
{
$(this).datepicker();
$(this).datepicker("show");
}
});
});
I hope this helps someone, and thanks for all the answers so far that led me to this solution that worked for me! :)
You need to use .live() so that any newly added elements have the event handler attached: http://api.jquery.com/live/
$('#birthday').bind('load', function() {
$(this).datepicker();
});
EDIT
.live() documentation states, that it is a bit out of date. With new versions of jquery (1.7+) use .on().
Boris, JK: This was super helpful for me. I have also found that you can use the following for AJAX html if you want to use Datepicker's date range selection:
$('#groundtransporation').live('focus', function() {
var gt = $( "#rentalPickUp, #rentalDropOff" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onSelect: function( selectedDate ) {
var option = this.id == "rentalPickUp" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
gt.not( this ).datepicker( "option", option, date );
}
});
});
I got another case.
My script is copying last table elements including datepicker.
The jquery will not working because the copied element has mark that it "hasDatepicker".
To activate datepicker in new element, remove that class name and the initiate it, like this.
$("#yournewelementid").attr("class","your-class-name");
$("#yournewelementid").datepicker();
your issue is always happens when elements don't exist when you try to initialize it.
When you use $(function(){/** some code **/}); elements must exsit on the document, it means that has to be on the html so you could can create a function to initialize the component or initialize it on the success event after been add it to the document.
Is important to first add the external html load in the ajax request to the document before you try to initialize it or it won't be initialize at all.
Example:
$.ajax({
url:"ajax_html.html",
dataType:"html"
}).done(function(html){
$("#selector").html(html)
init();
});
function init(){
$(".birthday").datepicker({});
}
You could initialize the date picker for the newly added element within your ajax success callback:
$.ajax({
...
success: function(response) {
if(response.success) {
$(body).append(response.html);
$("#birthday").datepicker();
}
}
});