I'm trying to follow this example: http://easyautocomplete.com/example/ajax-get to create an input field that will autocomplete hints from API.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Remote datasource</title>
<head>
<!-- Easy Autocomplete -->
<link rel="stylesheet" href="/plugins/easy-autocomplete/dist/easy-autocomplete.min.css">
<link rel="stylesheet" href="/plugins/easy-autocomplete/dist/easy-autocomplete.themes.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Easy Autocomplete -->
<script src="/plugins/easy-autocomplete/dist/jquery.easy-autocomplete.min.js"></script>
<script>
var options = {
url: "http://localhost:8081/api/customers",
getValue: "name",
template: {
type: "description",
fields: {
description: "email"
}
}
};
$(document).ready(function () {
console.log("ready");
$("#example-ajax-post").easyAutocomplete(options);
});
</script>
</head>
<body>
<input id="example-ajax-post" />
</body>
</html>
In my API response, I can see all my returned values (26 in total) however my input displaying only first 6 hints, even if I try to enter some data that's in my response I can only see the first 6 loaded fields each time.
API Return
Input hint
Am I missing something?
Default value for parameter maxNumberOfElements is 6.
you can increase this by adding this to your options
list: {
maxNumberOfElements: 10,
match: {
enabled: true
}
}
Docs
http://easyautocomplete.com/guide#sec-maxsize
Related
Hi I am creating a typewriting effect Using Type Js Library and I want to know is there any way I can know the Typed JS effect is completed?
Any kind of help is highly appreciated :)
var typed = new Typed('.typed', {
stringsElement: '.typed-strings',
loop:false
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<title>Document</title>
</head>
<body>
<div class="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span class="typed"></span>
</body>
</html>
A quick glance at the library's documentation shows that there is an onComplete parameter that takes a function: docs link
In the onComplete you can set a variable to mark the animation as completed.
let isEffectComplete = false;
const typed = new Typed('.typed', {
stringsElement: '.typed-strings',
loop:false,
onComplete: () => { isEffectComplete = true },
});
I would like to some specific days in the HTML calendar. But I am facing the problem like below. The calendar with the blue box is not allowed the changes. However, another calendar that is on the backside can be changed by JavaScript code. I wonder why I cannot change anything on the first calendar.
For example, the first day can be changed on the backside but cannot in the default calendar.
Here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>The selected date is as follows: <input type="date" class="disableFuturedate"></p>
<script>
$(document).ready(function () {
var currentDate = new Date();
$('.disableFuturedate').datepicker({
format: 'dd/mm/yyyy',
autoclose:true,
firstDay :3
});
});
</script>
</body>
</html>
I am trying to style the text in the below popup. I would like to have the text show on 2 lines i.e. Message sent successfully. should be on one line and One of our consultants will contact you within the next 2 business days. should be on another line. Is there anyway I can possibly append HTML to it?
onGetAdvice() {
this.loader.start();
this.getAdvice().subscribe((resp) => {
this.loader.stop();
this.infoPopupService.openInfoPopup('Message sent successfully. One of our consultants will contact you within the next 2 business days.');
this.showConnectWindow = false;
}, error => {
this.loader.stop();
console.log(error.statusText);
});
}
why don't you try to use a HTML popup with something like this I've found on this link.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
In the vue-select vuejs component, if you see on their demo page, you can select multiple items from the dropdown. However, if you type something that is not available in the dropdown, then you can just type that new text and press enter and it will become a tag. You can see this behavior here on their demo page:
https://sagalbot.github.io/vue-select/
However, I am unable to do this. I am able to select from the drop down, but if I type something new, then that doesn't become a tag. I have this jsbin showing what I've done. Any help is appreciated.
http://jsbin.com/xoxohenoli/edit?html,js,output
My Javascript:
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: function() {
return {
options: ["A","B"],
placeholder: 'Choose a country..',
}
},
});
My HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://unpkg.com/vue#2.1.10"></script>
<script src="http://unpkg.com/vue-select#2.0.0"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container-fluid">
<h2>VueSelect Basic Example</h2>
<v-select :placeholder="placeholder"
multiple
:options="options"></v-select>
</div>
</body>
</html>
You need to add taggable attribute to the component please check in working example.
please use full page for snippet to avoid overlapping console output.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-select#2.0.0/dist/vue-select.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container-fluid">
<h2>VueSelect Basic Example</h2>
<v-select taggable :placeholder="placeholder"
multiple
:options="options"></v-select>
</div>
<script>
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: function() {
return {
options: ["A","B"],
placeholder: 'Choose a country..',
}
},
});
</script>
</body>
</html>
We can create a button component on the fly by using the following code,
var $page = '<div/>'
$("<a>", {text: "Button"}).
buttonMarkup({
inline: false,
mini: true,
icon: "check"
}).on("click", function () {
//Click Function
}
).appendTo($page);
Like this how to create other JQM components/widgets or suggest me where to find that methods/events in the JQuery Mobile Docs.
Question updated on 10-12-13
Please check the following code
<!DOCTYPE html >
<head>
<title>:::: DYNAMIC JQM PAGE ::::: </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css"/>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(function () {
var page = $("<div/>", {
"data-role":"page"
}).append($("<h1/>")
.text("This is Header"))
.appendTo($.mobile.container);
})
</script>
</head>
<body>
</body>
</html>
above code is not working while creating a mobile page in the document body. How do i achieve this?...