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
Related
For my autocomplete I sort my results into 3 sections "title", "company", "tag".
I would like to have a headline for each section.
In practise I want to add <div class='ui-optionHeader'>Headline</div> before the li elements, I think.
I cant figure it out, either the headline is above every single element or it doesnt work at all.
I made an visual explanation - This is what I aim for:
Here is my code:
$(document).ready(function() {
src = "{{ route('searchajax') }}";
$("#search_text").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
dataType: "json",
data: {
term : request.term,
searchOption : $("#search_option").val()
},
success: function(data) {
response(data);
}
});
},
select: function(event, ui) {
$('#search_text').val(ui.item.value);
},
minLength: 1,
open : function(){
// $(".ui-autocomplete:visible").css({top:"+=13"});
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
if(item.option==="title") {
return $( "<li>" )
.append( "<div><i class='fas fa-tags'></i> " + item.label + "<br> title </div>" )
.appendTo( ul );
}
else if(item.option==="company"){
return $( "<li>" )
.append( "<div><i class='fas fa-building'></i> " + item.label + "<br> company </div>" )
.appendTo( ul );
}
else if(item.option==="tags"){
return $( "<li>" )
.append( "<div><i class='fas fa-utensils'></i> " + item.value + "<br> tags </div>" )
.appendTo( ul );
}
};
});
What it currently looks like:
Thanks in advance.
An Example:
$(function() {
$.widget("custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
},
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
var li;
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
li = that._renderItemData(ul, item);
if (item.category) {
li.attr("aria-label", item.category + " : " + item.label);
}
});
}
});
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_text").catcomplete({
delay: 0,
source: data
});
});
.ui-autocomplete-category {
background: #009F84;
color: #fff;
font-weight: bold;
padding: .2em .4em;
margin: 0;
line-height: 1.5;
}
form #search {
border: 1px solid #000;
line-height: 2em;
margin: 0;
padding-left: .5em;
width: 75%;
}
form button {
background: #009F84;
border: 0;
color: #fff;
font-weight: bold;
padding: .65em 2em;
margin-left: 0;
}
<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>
<form>
<input id="search_text"> <button type="submit">Find</button>
</form>
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" />
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 ,:)