:I have the following in one of my partial views:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#ProductName").autocomplete({
source: "Products",
minLength: 2,
select: function (event, ui) {
$("#newInvoiceLineForm").load("/Invoices/Product?name=" + ui.item.value);
}
});
});
</script>
And the autocomplete works fine and displays all the items returned but on select event I get a ui.item.value with just the first word of the two word item. For example I have "New Product" selected from the autocomplete and it results in the:
/Invoices/Product?name=New call.
Anyone had this situation before?
Thank you
This is the code that works with encodeURI:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#ProductName").autocomplete({
source: "Products",
minLength: 2,
select: function (event, ui) {
$("#newInvoiceLineForm").load(encodeURI("/Invoices/Product?name=" + ui.item.value));
}
});
});
</script>
You need to URL encode your string. Spaces in their raw form aren't acceptable to querystrings.
Related
I use jquery ui 1.10.4 to implement the autocomplete, and it work fine.
but now i have to use the jquery ui 1.9.2, but the autocomplete will not work.
1.The search result will not display, so I add the open() and close() function to solved it. Reference by jqueryUI autocomplete menu show effect
2.But the select function not working now, it will direct to the other page before. I write a conosle.log in the select function, but it not show.
Have anyone can help me to solve it?
$("#tags").autocomplete({
enable: true,
delay: 300,
open: function () {
$('ul.ui-autocomplete').addClass('opened');
},
close: function () {
$('ul.ui-autocomplete')
.removeClass('opened')
.css('display', 'block');
},
source: function (request, response) {
// get data
},
select: function (e, ui) {
console.log('TEST');
location.href = "http://domain/Page?id=" + ui.item.data;
},
autoFocus: true
});
It should work, just change ui.item.data by ui.item.value. Don't know why your console.log doesn't work. What version of jquery core do you use?
$("#tags").autocomplete({
enable: true,
delay: 300,
open: function () {
$('ul.ui-autocomplete').addClass('opened');
},
close: function () {
$('ul.ui-autocomplete')
.removeClass('opened')
.css('display', 'block');
},
source: ['apple','banana','orange'],
select: function (e, ui) {
alert(ui.item.value);
},
autoFocus: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"/>
<input id="tags" name="tags" type="text"/>
I am using jquery-ui autocomplete to retrieve items from a SQL database which is working fine but I would like to move the autocomplete list to another part of the page.
I have been trying to use the Position option from here but cant seem to get the correct syntax when applying to my code?
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#txtCity").autocomplete({
source: function (request, response) {
var param = { cityName: $('#txtCity').val() };
$.ajax({
url: "test.aspx/GetCities",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
select: function (event, ui) {
event.preventDefault();
minLength: 2//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data.
}
});
});
</script>
I wanted to move the autocomplete box to the right hand side of the textbox.
After a nights sleep my first attempt again this morning worked fine, think I had originally only missed a comma in one of my attempts yesterday.
I just stripped it back to a basic implementation using an array instead of the ajax call and then applied the working syntax to my code.
Wasted FAR too much time on this yesterday, just shows taking a step back and time away from the screen helps work things out!
Thanks for your help
Working code for the record:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery AutoComplete TextBox Demo</title>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
</head>
<body>
<form id="form1" runat="server">
<div><h1>AutoComplete Textbox</h1>
Software
<asp:TextBox TextMode="multiline" Columns="50" Rows="5" ID="txtCity" runat="server"></asp:TextBox>
</div>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#txtCity").autocomplete({
source: function (request, response) {
var param = { cityName: $('#txtCity').val() };
$.ajax({
url: "test.aspx/GetCities",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
position: {
my: "left center",
at: "right center",
},
select: function (event, ui) {
event.preventDefault();
minLength: 2//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data.
}
});
});
</script>
</body>
</html>
I have a jquery tablesorter script, and I am trying to add these two functions together. It seems like it would be simple, though unfortunately I have very little knowledge with javascript.
It will only work when I have one or the other in the , not like i have it below.
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("table").tablesorter({ sortList:[[0,0]]
}); }); });
$(document).ready(function(){
$("table").tablesorter({
textExtraction:function(s){
if($(s).find('img').length == 0) return $(s).text();
return $(s).find('img').attr('alt');
}
});
});
</script>
Try to do:
<script type="text/javascript">
$(document).ready(function () {
$("table").tablesorter({
sortList: [
[0, 0]
],
textExtraction: function (s) {
if ($(s).find('img').length == 0) return $(s).text();
return $(s).find('img').attr('alt');
}
});
});
</script>
I am having some trouble having my link function to execute javascript.
link:
<a class="glossyBtn" id="saveButton">Save</a>
Script:
<script type="text/javascript">
$(function (){
$('form').submit(function () {
$('#saveButton').attr('disabled', 'disabled');
});
});
</script>
$('form').submit() is fired when you submit a form (usually with <button type="submit">). Your button is not of submit type.
You may achieve it adding the following onclick to your <a> element: onclick="$('form').sumbit();" or add the following to your JS code
$('#saveButton').click(function{
$('#saveButton').attr('disabled', 'disabled');
$('form').submit();
})
I've found here that to overwrite one of the autocomplete events. But can somebody please provide me with example how to do the same?
The appendTo option does indeed work as expected, and if you inspect at the DOM, the <ul> results element will be attached to the element. However, due to absolute positioning generated by jQueryUI, the list still appears directly under the <input>.
That said, you can override the internal _renderItem to directly append results to a completely different element, for example:
HTML
<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>
JavaScript
$('input').autocomplete({
search: function(event, ui) {
$('.test ul').empty();
},
source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li/>')
.data('item.autocomplete', item)
.append(item.value)
.appendTo($('.test ul'));
};
I have also created a demo to demonstrate this. Please note that the latest jQuery library has not had jQueryUI tested against it fully, so I am using the previous version which allows me to select to include jQueryUI directly with the jsFiddle options.
<div class="test">Output goes here:<br/></div>
<script>
$("input#autocomplete").autocomplete({
source: ["something", "something-else"],
appendTo: ".text",
position: { my: "left top", at: "left bottom", of: ".test" }
// other options here
});
</script>
I needed more control over where to put the data, so this is how I went about it:
$("#input").autocomplete({
minLength: 3,
source: [
"ActionScript",
"AppleScript",
"Asp"
],
response: function(event, ui) {
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui) {
// close the widget
$(this).autocomplete('close');
}
});
hle's answer worked awesome for me and gives you more flexibility! Here is my test code that was modified by his answer:
$("#autocomplete").autocomplete({
minLength: 3,
source: ["something", "something-else"],
response: function(event, ui)
{
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui)
{
// close the widget
$(this).autocomplete('close');
}
});
Although this question is pretty old but i got a pretty easy solution. No hack, nothing just in jQuery way:
Instead of autocomplete response function, just add response data in div on success
$(document).ready(function () {
$("#book-code-search").autocomplete({
minLength: 2,
delay: 500,
source: function (request, response) {
$.ajax( {
url: "server side path that returns json data",
data: { searchText: request.term, param2 : $("#type").val()},
type: "POST",
dataType: "json",
success: function( data ) {
$("#data-success").html(data.returnedData); //returnedData is json data return from server side response
/* response($.map(data, function (item) {
return {
label: item.FullDesc,
value: item.FullDesc
}
})) */
}
});
}
});
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='data-success' style='color: green;'></div>
<input type='text' placeholder='Enter Book Code' id='book-code-search' />
<input type='hidden' id='type' value='book'>