My autocomplete works only on the condition that the Page is reloaded. If I navigate to the page through a link this does not work. I have inluded the source code and a demo I have used. In the demo I have changed the var data field in order to show the values I'm fetching in the application.
Note: This is for a Ruby on Rails application.
Can someone say what is wrong with this?
<script>
$(function() {
var doctors = <%== #doctors %>;
var data = doctors.map(function (a) {
return { label: a[0], id: a[1] };
});
$('#tags').autocomplete({
delay: 0,
source: data,
select: function(event, ui) {
$('#doctor_id').val(ui.item.id);
}
});
} );
</script>
HTML code:
<div class="row">
<div class="input-field col s12 m6">
<i class="material-icons prefix">textsms</i>
<label class="active" for="tags">Doctor</label>
<input id="tags" type="text" class="autocomplete" required/>
<input id="doctor_id" name="doctor_id" type="hidden" required/>
</div>
</div>
Demo : JSfiddle
i tried your code with the correct scripts it runs just fine have a look
here is the head part
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - 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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
here is your fiddle script
var data = [
{label: "Ann Perera", id: 1},
{label: "Sam Perera", id: 2},
{label: "John Perera", id: 3}
];
$('#tags').autocomplete({
delay: 0,
source: data,
select: function(event, ui) {
$('#doctor_id').val(ui.item.label);
}
});
} );
Related
I'm trying to get a regular form field used for searching for an address to autocomplete its values, as seen on this page, using Leaflet Geosearch plugin.
So far the documentation says it can be binded to a form. Jquery UI's autocomplete looks like it can accomplish this, however i have not been able to wrap my head around how to do it.
I have successfully linked the form field to the geosearch provider, and it returns an array that can be seen in the browser console. I can algo get the autocomplete plugin to work, but with a local array, not the one produced by the geosearch plugin.
Here is an example of both plugins in action separately:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet tests</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<style type="text/css"> #mapid { height: 500px; width: 500px}</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.css" />
<script src="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.umd.js"></script>
</head>
<body>
<div id="mapid"></div>
<hr>
<div class="">
<label for="search">geosearch field (check console): </label>
<input id="search">
</div>
<div class="">
<label for="search2">autocomplete field (apple or banana): </label>
<input id="search2">
</div>
<script type="text/javascript">
//code for generating map below
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
subdomains: ['a','b','c']
}).addTo(mymap);
//code for search form below
const providerform = new GeoSearch.OpenStreetMapProvider();
const input = document.querySelector('input[id="search"]');
input.addEventListener('input', async (event) => {
const results = await providerform.search({ query: input.value });
console.log(results[0]); // » [{}, {}, {}, ...]
});
//
let fruits = ['Apple', 'Banana']
$("#search2").autocomplete(
{
source: fruits,
delay: 100,
minLength: 1
});
</script>
</body>
</html>
I'd greatly appreciate any pointers in the right direction on how to get the autocomplete to work with the geosearch provider.
This should work, but I don't know how to check at the moment because https://nominatim.openstreetmap.org/ is currently not working.
$('#search2').autocomplete({
source(request, response) {
const providerform = new GeoSearch.OpenStreetMapProvider({
params: {
limit: 5
}
});
return providerform.search({ query: request.term }).then(function (results) {
response(results);
});
},
delay: 100,
minLength: 1
});
Here's one basic example using jquery, there are other options too
const input = document.querySelector('input[id="search2"]');
input.addEventListener('input', async (event) => {
const results = await providerform.search({ query: input.value });
console.log(results[0]); // » [{}, {}, {}, ...]
});
let fruits = ['Apple', 'Banana']
$("#search2").autocomplete(
{
source: fruits,
delay: 100,
minLength: 1
});
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/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>
</head>
<body>
<hr>
<h1> Autocomplerde demo </h1>
<div class="">
<label for="search2">autocomplete field (apple or banana): </label>
<input id="search2">
</div>
<script type="text/javascript">
</script>
</body>
</html>
I'm creating a Django site, on a certain template i added an Ajax form and i would like to add an autocomplete feature, in order to make navigation easier.
My main problem is that the data i should search is a JSON array of objects, while most of the solutions i found work with normal arrays.
Here is what i have now:
<script>
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
console.log(data)
//Autocomplete
});
});
</script>
<input type="text" id='firstfield' name='input_val'>
This is what the data looks like, it's around 700 records; here are the first three:
"results": [
{
"item": "First",
"id": "1847",
},
{
"item": "Second",
"id": "4442",
},
{
"item": "Third",
"id": "3847",
}]
I need this to be as fast as possible. Is there a JQuery/Ajax native solution for this? Or is there a specific library to do this? Any advice or solution is appreciated, thanks in advance!
You could use the jQuery Typeahead Search plugin. Just set-up your form to use the proper nesting of classes as seen below.
$(() => {
//$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
let data = {
"results": [
{ "item": "First", "id": "1847" },
{ "item": "Second", "id": "4442" },
{ "item": "Third", "id": "3847" }
]
};
$('#first-field').typeahead({
source: {
data: data.results.map(record => record.item)
},
callback: {
onInit: function($el) {
console.log(`Typeahead initiated on: ${$el.prop('tagName')}#${$el.attr('id')}`);
}
}
});
//})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>
<h1>jQuery Typeahead</h1>
<form>
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input id="first-field" name="first-field" placeholder="Search" autocomplete="off">
</div>
<div class="typeahead__button">
<button type="submit"><i class="typeahead__search-icon"></i></button>
</div>
</div>
</div>
</form>
Try this one:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - 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>
$(document).ready(function(){
// Defining the local dataset
$.getJSON('http://127.0.0.1:8000/myapi/', function(data) {
console.log(data)
$( "#tags" ).autocomplete({
source: data
});
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
You can use Jquery autocomplete() function
Here is the link
https://jqueryui.com/autocomplete/
$( "#tags" ).autocomplete({
source: availableTags
});
} );
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure"}
I'm trying to render a kendodropdownlist like this example: http://dojo.telerik.com/IJEGo, but it displays the items on a mobile like a actionsheet, no like a dropdownlist. (See my screen link at the end)
This is my index.html header:
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet">
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet">
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/Controlador.js"></script>
<script src="scripts/Facturas.js"></script> </head>
My view:
<div data-role="view" data-title="home" data-layout="main" data-model="APP.models.home">
<h1 data-bind="html: title" style="color:white;"></h1>
</br>
<!-- <input id="near-km2" />-->
<select id="near-km2" class=".k-dropdown">
<script>
var kmData = [{
text: "5km",
value: "5"
}, {
text: "10km",
value: "10"
},
{
text: "25km",
value: "25"
},
{
text: "50km",
value: "50"
}];
$("#near-km2").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: kmData,
index: 1
});
</script>
</div>
What is wrong with my code ??
my screen: http://s28.postimg.org/m60mm7t25/Capture1.jpg
I will appreciate your help.
I am new into web devlopment. I am trying to use select2-bootstrap. It working fine. Just need a css help.
Initial display of widget :
There is an indent between the bars(between Search for a movie and No matches found)
After clicking on the widget it looks fine as shown here and thereafter the dent disappears even on subsequent use.
Can someone suggest how to remove the dent between two bars in the first pic above.
NOTE :
CSS Added : select2.css, select2-bootstrap.css and bootstrap.css
JS Added : bootstrap.js, jquery-1.9.1.js, select2.js
Also please suggest how to avoid the No matches found display immediately after page loads.
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Bootstrap</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2-bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<script type="text/javascript">
var contextPath = "<%=request.getContextPath()%>";
$(document)
.ready(
function() {
MultiAjaxAutoComplete('#e6',contextPath + "/getData");
$('#save').click(function() {
alert($('#e6').val());
});
});
</script>
<script type="text/javascript">
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
placeholder : "Search for a movie",
//minimumInputLength : 1,
multiple : true,
ajax : {
url : url,
dataType : 'json',
data : function(term, page) {
return {
q : term,
page_limit : 10,
};
},
results : function(data, page) {
console.log("page = " + page);
return {
results : data.results
};
}
},
formatResult : formatResult,
formatSelection : formatSelection,
initSelection : function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id : item[0],
country : item[1]
});
});
callback(data);
}
});
};
function formatResult(movie) {
return '<div>' + movie.country + '</div>';
};
function formatSelection(data) {
return data.country;
};
</script>
</head>
<body style="background-color: #F9F9F6">
<h1>Serach Movies</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<input type='hidden' id="e6" class="span8" />
</div>
<div class="span3">
<button id="save">Save</button>
</div>
</div>
</div>
</body>
</html>
I am new to kendo ui mvvm and am facing the follow issue:
Scenario
I need to populate few fields in a div whose role is a listview, using the MVVM format.
The data comes from the dataSource and I am getting an unusual error. I am unable to bind the fields from the data source to the div.
Follow is my JSBin Sample: http://jsbin.com/ajoyug/6/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="myListView" data-role="listView" data-bind="source:dataSource">
<span data-bind="text:prodName"></span>
<span data-bind="text:qty"></span>
<span data-bind="text:total"></span>
<span data-bind="text:price"></span>
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
dataSource.read();
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
Kindly help me out. I saw many samples available online, but they used templates to bind multiple values or they were'nt suiting my requirement..Hence I thought of creating my own JSBin Sample and ask where am I getting stuck...
Questions
How shall I bind the fields from a dataSource?
My end motive is to bind the div with the values in the dataSource..Is there any other method to do that if not setting it as a listview?
Thanks!!
Hardik
Your JavaScript looked good. You had some problems with your HTML though. The data-role attribute needs to be "listview". Rather than putting 4 spans inside your listview div, you should really use a template, and reference it by ID.
It's also important to note that your template must have a root element, because kendo only performs binding on the first element in the template.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script id="tmp" type="text/x-kendo-template">
<div>
<span data-bind="text:prodName"></span><br/>
<span data-bind="text:qty"></span><br/>
<span data-bind="text:total"></span><br/>
<span data-bind="text:price"></span>
</div>
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div
id="myListView"
data-role="listview"
data-bind="source: dataSource"
data-template="tmp">
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});