Using JQuery UI widget to try and call in this js file of string data but getting 'no results found'. No console errors. I simply don't think I'm referencing this correctly as I'm not very proficient with jquery/js. If someone could point me in a direction, I'd appreciate it.
<input type="text" id="test" />
scripts
<script src='js/jquery-1.11.0.min.js'></script>
<script src="js/autocomplete/jquery-ui-1.10.3.custom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Providers.js" type="text/javascript" charset="utf-8"></script>
formatted in file
var providerdata=[{"ProviderID":"1","NAME":"name1"},{"ProviderID":"2","NAME":"name2"},{"ProviderID":"3","NAME":"name3"}];
calling
$('#test').autocomplete({
source: providerdata,
success: function(data) {
var cat_data = $.map(data.Providers, function(item) {
return {
value: item.NAME,
label: item.NAME,
};
});
$("#test").autocomplete({
minlength:3,
delay: 500,
source: cat_data
});
}
});
uhm... i'm not sure, but i don't think that autocomplete has success property because its a property of an ajax call... maybe you use it inside an ajax call to get back the source, but in your case you already has surce providerdata, true?
Assuming that your $.map works fine, you can do something like:
var cat_data = $.map(providerdata, function(item) {
return {
value: item.NAME,
label: item.NAME,
}
});
$('#test').autocomplete({
source: cat_data,
minlength:3,
delay: 500,
});
[edit] - i see doc and i think you can do also:
$('#test').autocomplete({
source: function(){
return $.map(providerdata, function(item) {
return {
value: item.NAME,
label: item.NAME,
};
})
},
minlength:3,
delay: 500,
});
is it works?
Related
I download this script https://www.jqueryscript.net/form/Tags-Input-Autocomplete.html and i create route
Route::get('/ingredients-data', function(){
$data = Menu_Ingredient::all()->pluck('name')->toArray();
return response($data);
});
i wanna use this to source in autocomplete.
<script type="text/javascript">
$(function() {
$('#form-tags-4').tagsInput({
'autocomplete': {
source: [
'apple',
'banana',
'orange',
'pizza'
]
}
});
});
</script>
how i can do it to link route in source?
you should pass your data as encoded json to source :
<script type="text/javascript">
$(function() {
$('#form-tags-4').tagsInput({
'autocomplete': {
source: #json($data)
}
});
});
</script>
You might also like to use the select2 in jquery. Ive used this select2, it has good documentation. You can check their documentation here Select2
I'm using selectize.js for remote search and get options against that search for my select input.
I've seen example code in their demo
<script type="application/javascript">
$(function () {
$('#workers_paid').selectize({
placeholder: "No worker Is selected",
valueField: "name",
labelfield : "name",
searchField: 'name',
render: {
option: function (item,escape) {
console.log(item);
}
},
onLoad : function (data) {
}
,
load: function (query, callback) {
alert(query);
let data = JSON.parse('{"users" : [{"user_name": "Humza"},{"user_name": "Humza"},{"user_name": "Humza"},{"user_name": "Humza"},{"user_name": "Humza"},{"user_name": "Humza"}]}');
callback(data.users);
}
});
});
</script>
This is my code that i've written for loading a static data but still render is not logging any data in console .... Onload function is also working just render is not calling anything or any options is not being created.
Sorry for bad english and thanks in advance
Im trying to use jquery ui for search bar autocomplete. When I use div id="inputs" autocomplete works fine, but if I use input id="inputs" it's not working and i need to use input in order to search works properly.
(function ($) {
$.fn.googleSuggest = function(opts){
opts = $.extend({service: 'web', secure: false}, opts);
var services = {
web: { client: 'hp', ds: '' },
}, service = services[opts.service], span = $('<span>');
opts.source = function(request, response){
$.ajax({
url: 'http'+(opts.secure?'s':'')+'://clients1.google.com/complete/search',
dataType: 'jsonp',
data: {
q: request.term,
nolabels: 't',
client: service.client,
ds: service.ds
},
success: function(data) {
response($.map(data[1], function(item){
return { value: span.html(item[0]).text() };
}));
}
});
};
return this.each(function(){
$(this).autocomplete(opts);
});
}
}(jQuery));
$.each("web".split(" "), function(i, v){
var div = $("<div>").appendTo("#inputs")
, input = $("<input>").appendTo(div)
input.googleSuggest({ service: v });
});
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<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>
<div id="inputs"></div>
</body>
</html>
<input> tags can't have child elements, so you can't append nodes to them.
It looks like what you're trying to append is a div, which contains another input, which you run googleSuggest() against:
var div = $("<div>").appendTo("#inputs")
, input = $("<input>").appendTo(div)
input.googleSuggest({ service: v });
So it seems that you don't need to append anything. Instead, just put googleSuggest on the <input> that's already in the DOM:
$('#inputs').googleSuggest({ /*...*/ })
My JS below runs from my search bar and shows results in a same page DIV. I would like to edit this to take them to the page selected from the search bar maybe even using a separate JSON file, or not, either way.
$(function(){
var url = [
{ value: 'Home', data: 'http://google.com' },
{ value: 'Guide', data: 'http://google.com' },
{ value: 'Examples', data: 'ttp://google.com' },
{ value: 'Themes', data: 'http://google.com' },
{ value: 'Download', data: 'http://google.com' },
];
// setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
lookup: url,
onSelect: function (suggestion) {
var thehtml = '<strong>Page Name:</strong> ' + suggestion.value + ' <br> <strong>URL:</strong> ' + suggestion.data;
$('#outputcontent').html(thehtml);
}
});
});
You can use window.location.assign to load the URL as a new document.
// setup autocomplete function pulling from currencies[] array
$('#autocomplete').autocomplete({
lookup: url,
onSelect: function (suggestion) {
window.location.assign(suggestion.data);
}
});
Alternatively, you can use window.location.href = suggestion.data;
so I am trying to read the data from my JSON file and display it on the webpage using HTML. It would work with simple keys with this particular database it wouldn't work for me.
JSON:
var carInfo = [
{
carId: 1,
carPrice : 15.00,
},
{
carId: 2,
carPrice : 25.00,
}
];
JS:
$(document).ready(function() {
$.getJSON("vehicle_data.json", function(data) {
$.each(data.carInfo, function() {
$("ul").append("<li>Car ID: "+this[carInfo[0].carId]);
});
});
});
HTML:
<html>
<body>
<ul></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="json_data_retrieve.js"></script>
</body>
</html>
It is not a valid JSON file. It is a JS script.
var carInfo = [
{
carId: 1,
carPrice : 15.00,
},
{
carId: 2,
carPrice : 25.00,
}
];
Try this:
{
"carInfo":
[
{
"carId": 1,
"carPrice": 15
},
{
"carId": 2,
"carPrice": 25
}
]
}
Update:
You may load this script as a script source in an HTML. It must be an .js file.
<script src="vehicle_data.js"></script>
If you need to load it dynamically, use jQuery $.getScript method.
It doesn't matter that it has .json extensions because it will be evaluated as a script.
$(document).ready(function()
{
$.getScript("vehicle_data.json", function()
{
// Pay attention. In this case, you work with carInfo
// variable because it has been executed as a script,
// but not loaded as a JSON file.
$.each(carInfo, function() {
$("ul").append("<li>Car ID: " + this[carInfo[0].carId]);
});
});
});
However, it is very strange that someone gives you .json file with JS declaration and tells you that you should execute it but shouldn't rename it or load as a script.
Looks like you are trying to iterate the parent object from within itself.
Try this
$.each(data.carInfo, function(k, v) {
$("ul").append("<li>Car ID: "+v.carId);
});