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>
Related
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
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 the following code snippet which is invoked when edit button in grid is clicked a window pops up
edit: function(e) {
$('input[name="prods"]').each(function()
{
var textarea = $(document.createElement('textarea'));
textarea.text($(this).val());
$(this).after(textarea).remove();
});
}
A text box input type is converted to textarea which works fine.
Once it is converted to textarea, how do I assign the value of textarea to $('input[name="prods"]')
when save button is clicked of popup window?
Please try with the below code snippet.
We have to retrieve value from the textArea and assigned its value into model property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<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.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
</div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup",
edit: function (e) {
$('input[name="ProductName"]').each(function () {
var textarea = $(document.createElement('textarea'));
textarea.attr("id", "txtProductName");
textarea.text($(this).val());
$(this).after(textarea).remove();
});
},
save: function (e) {
e.model.ProductName = $('#txtProductName').val();
}
});
});
</script>
</body>
</html>
Let me know if any concern.
Could this be a mix of val and text? textarea.text seems wrong, that would normally be textarea.val('whatever')
Here this is covered:
jQuery get textarea text
You can use this method as well ..
<div class="ref">
<input type="text" name="prod" value="TEST"/>
</div>
jQuery('.edit').click(function(){
var val = jQuery('input[name="prod"]').val()
jQuery('.ref').html('<textarea name="prod">'+val+'</textarea>');
});
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