I am trying to add images before text in jquery autocomplete search
I use the code below, it works but no images are shown so how can I make images show before text
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [{
value: "NYC",
img: 'http://www.uidownload.com/files/974/95/760/new-york-icon.png',
url: 'http://www.example.com'
}, {
value: "LA",
img: 'https://www.shareicon.net/data/128x128/2015/09/17/642167_cinema_512x512.png',
url: 'http://www.example.com'
},
{
value: "Peru",
img: 'http://tvmak.com/img/alsatm.jpg',
url: 'http://www.example.com'
}
],
select: function(event, ui) {
window.location = ui.item.url;
}
});
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<search style="font-size:62.5%;">
<input id="autocomplete" />
</search>
$(function() {
var projects = [{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "http://w.g5outdoors.com/trackrecord/jquery-ui/development-bundle/demos/autocomplete/images/jquery_32x32.png",
href: "https://jquery.com/"
}, {
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "http://w.g5outdoors.com/trackrecord/jquery-ui/development-bundle/demos/autocomplete/images/jqueryui_32x32.png",
href: "https://jqueryui.com/"
}, {
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "https://www.brainyquote.com/favicon-32x32.png",
href: "https://jquery.com/"
}];
$(".field_values").autocomplete({
source: projects,
create: function() {
$(this).data('ui-autocomplete')._renderItem = function(ul, item) {
return $('<li>')
.append('<img class="icon" src="' + item.icon + '" />' + item.label + '<br>' + item.value + '')
.appendTo(ul);
};
}
});
});
.icon {
width: 20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/black-tie/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input class="field_values" />
Related
I have already implemented jquery autocomplete in this Blog
Now i need to achieve multiple values. I have seen This to way of implementing the multiple values.
The below is the code which i have used to implement jquery autocomplete.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var selectedItemUrl = "";
$(function() {
var source = [{
value: "NYC",
url: 'http://www.nyc.com'
}, {
value: "LA",
url: 'http://www.la.com'
}, {
value: "Philly",
url: 'http://www.philly.com'
}, {
value: "Chitown",
url: 'http://www.chitown.com'
}, {
value: "DC",
url: 'http://www.washingtondc.com'
}, {
value: "SF",
url: 'http://www.sanfran.com'
}, {
value: "Peru",
url: 'http://www.peru.com'
}];
$("#autocomplete").autocomplete({
minLength: 0,
source: source,
select: function(event, ui) {
selectedItemUrl = ui.item.url
}
})
});
function SearchItem(e){
if(selectedItemUrl!="")
window.location=selectedItemUrl
else
alert("select something to search")
}
</script>
</head>
<body>
<input id="autocomplete" />
<button onclick='SearchItem()'>
Search
</button>
</body>
</html>
try like this for multi-value autocomplete
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
var selectedItemUrls = [];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$(function() {
var source = [{
value: "NYC",
url: 'http://www.nyc.com'
}, {
value: "LA",
url: 'http://www.la.com'
}, {
value: "Philly",
url: 'http://www.philly.com'
}, {
value: "Chitown",
url: 'http://www.chitown.com'
}, {
value: "DC",
url: 'http://www.washingtondc.com'
}, {
value: "SF",
url: 'http://www.sanfran.com'
}, {
value: "Peru",
url: 'http://www.peru.com'
}];
$("#autocomplete").autocomplete({
minLength: 0,
source: function( request, response ) {
response( $.ui.autocomplete.filter(
source, extractLast( request.term ) ) );
},
focus: function() {
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
terms.pop();
terms.push( ui.item.value );
terms.push( "" );
this.value = terms.join( ", " );
selectedItemUrls.push(ui.item.url);
return false;
}
});
});
function SearchItem(e){
if(selectedItemUrls.length > 0)
{
for(var i = 0; i< selectedItemUrls.length; i++)
{
window.open(selectedItemUrls[i]);
}
}
else
{
alert("select something to search");
}
}
}
</script>
</head>
<body>
<input id="autocomplete" />
<button onclick='SearchItem()'>
Search
</button>
</body>
</html>
Plunker : http://plnkr.co/edit/6GaJRfPqshXBGkFln3rD?p=preview
In This blog i have created sucessfully jquery autocomplete with search button sucessfully. But i want just like This
My searchbox aim to select tags-> redirect to another page..
my problem is i want to add one more search box with one button only i mean search fields i mean search areas should be 2 with same links and i mean i modify the links like zipcode links and city links later but i presently need one search button with multiple search areas i hope my question is clear and the above is my code
var selectedItemUrl = "";
$(function() {
var source = [{
value: "NYC",
url: 'http://www.nyc.com'
}, {
value: "LA",
url: 'http://www.la.com'
}, {
value: "Philly",
url: 'http://www.philly.com'
}, {
value: "Chitown",
url: 'http://www.chitown.com'
}, {
value: "DC",
url: 'http://www.washingtondc.com'
}, {
value: "SF",
url: 'http://www.sanfran.com'
}, {
value: "Peru",
url: 'http://www.peru.com'
}];
$("#autocomplete").autocomplete({
minLength: 0,
source: source,
select: function(event, ui) {
selectedItemUrl = ui.item.url
}
})
});
function SearchItem(e) {
if (selectedItemUrl != "")
window.location = selectedItemUrl
else
alert("select something to search")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<input id="autocomplete" />
<button onclick='SearchItem()'>search
Try this one
Whole code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var selectedItemUrl1=null
var selectedItemUrl2=null
$(function () {
var source = [{
value: "NYC",
url: 'http://www.nyc.com'
}, {
value: "LA",
url: 'http://www.la.com'
}, {
value: "Philly",
url: 'http://www.philly.com'
}, {
value: "Chitown",
url: 'http://www.chitown.com'
}, {
value: "DC",
url: 'http://www.washingtondc.com'
}, {
value: "SF",
url: 'http://www.sanfran.com'
}, {
value: "Peru",
url: 'http://www.peru.com'
}];
var source2 = [ {
value: "LA",
url: 'http://www.la.com'
}];
$("#autocomplete").autocomplete({
minLength: 0,
source: source,
select: function (event, ui) {
selectedItemUrl1 = ui.item.url
}
})
$("#autocomplete2").autocomplete({
minLength: 0,
source: source2,
select: function (event, ui) {
selectedItemUrl2 = ui.item.url
}
})
});
function SearchItem(e) {
if (selectedItemUrl1.indexOf("http") != -1 && selectedItemUrl2.indexOf("http") != -1) {
if (selectedItemUrl1 != "" && selectedItemUrl2 != "") {
$("#output").append("<div ><object style='heigth:600px;width:600px;float:left' data='" + selectedItemUrl1 + "'/></div>");
$("#output").append("<div ><object style='heigth:600px;width:600px;float:left' data='" + selectedItemUrl2 + "'/></div>");
}
}
}
</head>
<body>
<input id="autocomplete" />
<input id="autocomplete2" />
<button onclick='SearchItem()'>search</button>
<div id="output"></div>
</body>
</html>
This
is my blog.
This is the code
<!doctype html>
Jquery Auto Complete
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [
{ value: "NYC", url: 'http://www.nyc.com' },
{ value: "LA", url: 'http://www.la.com' },
{ value: "Philly", url: 'http://www.philly.com' },
{ value: "Chitown", url: 'http://www.chitown.com' },
{ value: "DC", url: 'http://www.washingtondc.com' },
{ value: "SF", url: 'http://www.sanfran.com' },
{ value: "Peru", url: 'http://www.peru.com' }
],
select: function (event, ui) {
window.location = ui.item.url;
}
});
});
</script>
<input id="autocomplete" />
</!doctype>
Now when ever the user search for query NYC and when it is selected is redirecting to the url but my aim is to put search button beside when the user clicks the search button then it should be redirected. I hope my question is clear thanks in advance.
Full Updated code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var selectedItemUrl = "";
$(function() {
var source = [{
value: "NYC",
url: 'http://www.nyc.com'
}, {
value: "LA",
url: 'http://www.la.com'
}, {
value: "Philly",
url: 'http://www.philly.com'
}, {
value: "Chitown",
url: 'http://www.chitown.com'
}, {
value: "DC",
url: 'http://www.washingtondc.com'
}, {
value: "SF",
url: 'http://www.sanfran.com'
}, {
value: "Peru",
url: 'http://www.peru.com'
}];
$("#autocomplete").autocomplete({
minLength: 0,
source: source,
select: function(event, ui) {
selectedItemUrl = ui.item.url
}
})
});
function SearchItem(e){
if(selectedItemUrl!="")
window.location=selectedItemUrl
else
alert("select something to search")
}
</script>
</head>
<body>
<input id="autocomplete" />
<button onclick='SearchItem()'>
Search
</button>
</body>
</html>
Please mark as an answer if it helps u now :0 ,:)
I have an application that uses kendo grid, and when I try to run the application, I get this error
JavaScript runtime error: 'kendo' is undefined
Below is my code. Where do I need to define kendo?
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<div id="rpViewContent" class="view-content">
<div id="purchdGrid"
data-role="grid"
data-resizable="true"
data-navigatable="true"
data-editable="true"
data-pageable="false"
data-columns="[
{ 'field': 'PO', 'title': '<b>PO #', 'width': 65 },
{ 'field': 'Line', 'title': '<b>Line #', 'width': 65 },
{ 'field': 'Item', 'title': '<b>Item #', 'width': 65 },
]"
data-bind="source:purchDataSource"
style="height: 55%">
</div></div>
<script>
var viewModel = kendo.observable({
purchDataSource: new kendo.data.DataSource({
schema: {
model: {
id: "ID",
fields: {
Line: { type: "string" },
Item: { type: "string" }
}
}
},
data: [
{ ID: "43824", Line: "1", Item: "Thus is a test 1" },
{ ID: "43825", Line: "2", Item: "Thus is a test 2" },
{ ID: "43826", Line: "3", Item: "Thus is a test 3" }
]
})
});
kendo.bind($("#purchViewContent"), viewModel);
</script>
This snippet shows a valid Kendo object, ensure your link and script tags are in the correct place in the HTML document.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css" />
</head>
<body>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<script>
console.log(kendo);
</script>
</body>
</html>
The problem I am facing here is http://jqueryui.com/autocomplete/#categories I am unable to figure out how to make "No result found" appear in the drop down list of auto complete menu search. Can someone share there insight on how this can be achieved?
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Categories</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</style>
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
that._renderItemData( ul, item );
});
}
});
</script>
<script>
$(function() {
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
{ label: "antal", category: "" },
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data
});
});
</script>
</head>
<body>
<label for="search">Search: </label>
<input id="search" />
</body>
</html>
$( "#search" ).catcomplete({
delay: 0,
source: data
});
Replace To:
$( "#search" ).catcomplete({
delay: 0,
source: function(request, response) {
var result = data.slice(0);
result = $.ui.autocomplete.filter(result, request.term);
if(! result.length) {
result.push({
label: 'No Result Found',
category: "",
isPlaceholder: true
});
}
response(result);
}
});
See Example