Is there any way to get input element on Autocomplete source function? $(this) not referring to input of autocomplete instance.
jsFiddle sample here.
<input type="text" data-code="foo" placeholder="type something ..." class="suggest" />
<input type="text" data-code="foo2" placeholder="type something ..." class="suggest" />
JavaScript
$(".suggest").autocomplete({
delay: 100,
source: function (request, response) {
// get foo here,: $(this).data("code"); not working
// Suggest URL
var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY";
suggestURL = suggestURL.replace('%QUERY', request.term);
// JSONP Request
$.ajax({
method: 'GET',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
url: suggestURL
})
.success(function(data){
response(data[1]);
});
}
});
this.element gets the current element on source function.
$(".suggest").autocomplete({
delay: 100,
source: function (request, response) {
this.element.data("code");
// Suggest URL
var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY";
suggestURL = suggestURL.replace('%QUERY', request.term);
// JSONP Request
$.ajax({
method: 'GET',
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
url: suggestURL
})
.success(function(data){
response(data[1]);
});
}
});
Working sample here
Related
jeasyui: how to get queryparams in another page by clientside
page 1(root.html):
$.ajax({
type: "get",
async: true,
url: "/ashx/product/root.ashx",
dataType: 'json',
success: function (res) {
var o = $('#tb');
for (i = 0; i < res.length; i++) {
o.tabs('add', {
title: res[i].Name + '-' + res[i].PkId,
href: '/html/usr/node.html', queryParams: { 'id': res[i].id }
});
o.tabs('select', 0);
}
}
});
page 2(node.html):
<script>
// how to get queryParams from page root.html here in javascript.
alert();
</script>
Use JSONP
JQUERY
$.ajax({
url:"node.html.html",
dataType: 'jsonp',
success:function(json){
alert("Success");
},
error:function(){
alert("Error Message");
}
});
node.html ( note im using php )
<?php
$arr = array("param1",
"param2",
array("param3","param4"));
$arr['name'] = "response";
echo json_encode($arr);
?>
I am trying to get jQuery autocomplete in a textbox. But I don't seem to be able to display the data from my JsonResult in the view, I checked with firebug and verfied that the data is transferred from server, just doesn't disply in the TextBox. I don't get any errors.
Here's my code :
public JsonResult search(string term)
{
// string prefixText =SearchString;
var FamilyLastName = _repository.FamilySearch(term);
var data=FamilyLastName.ToList();
return Json(data);//.Select(x => new { label = x, ID = x }));
}
#using (Html.BeginForm())
{
<label for="SearchString">My Autocomplete:</label>
<input class="form-control" type="text" name="SearchString" id="SearchString" autocomplete="off" />
}
<script type="text/javascript">
$(document).ready(function () {
var param = { "searchstring": $("#SearchString").val() };
$("#SearchString").autocomplete({
autoFocus: true,
source: function (request, response) {
// call your Action
$.ajax({
url:'search?term=' + $("#SearchString").val(),
// data:"{'term':'" +$("#SearchString").val() + "'}",
dataType: 'json',
method: "post",
contentType: "application/json; charset=utf-8",
success: function (data) {
return{
label:data.FamilyLastName
};
},
select:
function (event, ui) {
$('#SearchString').val(ui.item.label);
return false;
},
});
},
minLength: 1,// requ
I am trying to make an autocomplete functionality for my page.
I have a textbox and I would like to make suggestions from my database.
I have this JsonResult in my controller:
public JsonResult ItemAutocomplete(string term)
{
var result = _db.SelectTable("SELECT [i].[Name] from [dbo].[Item][i] WHERE [i].[Name] LIKE #0", SqlDb.Params(term +"%"));
return Json(result, JsonRequestBehavior.AllowGet);
}
and in my view:
#Scripts.Render("~/bundles/jqueryui")
<h2>jQuery AutoComplete</h2>
<script>
$(function () {
$('#tags').autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("ItemAutocomplete")',
extraParams: { term: $('#tags').val(),
dataType: "json",
contentType: 'application/json, charset=utf-8',
data: {
term: $("#tags").val()
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item
};
}));
},
error: function (xhr, status, error) {
alert(error);
}
});
},
minLength: 2
});
});
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
The problem is that my ItemAutocomplete jsonResult always receives a null param... even if I call it directly from localhost, like this: "localhost/Appointment/ItemAutocomplete/item1".
Use (request.term) below
data: { term: request.term }
instead of
data: { term: $('#tags').val() }
In Autocomplete Text box, search string detect by "request.term".
I have the following code...
HTML:
<button type="button" class="btn btn-primary" id="filterData"
data-filterString="#Model.LastName">Filter</button>
TypeScript:
$("button[id='filterData']").click(() => {
var dataList = [];
var filter = $(this).data("filterString");
$("input[class='personRecord']").each(function() {
dataList.push($(this).val());
});
var parameters = JSON.stringify({ "filterString": filter, "dataList":paymentList });
$.ajax({
url: "/Employee/FilterName",
data: parameters,
type: "POST",
contentType: "application/json; charset=utf-8",
success: function () {
alert("Success");
}
});
});
Controller:
[HttpPost]
public void SendAll(string filterString, List<string> dataList) {
...
}
However, the variable filter keeps returning "undefined". How do you pass custom data items, data-filterString in this case?
In your jQuery, you can only use lower case values for the data method, even if your attributes are upper/mixed case. So you should write:
var filter = $(this).data("filterstring");
If you do use mixed case in your key, jQuery converts that to a dashed variable, so when you search for filterString, your attribute should be called data-filter-string.
$(function() {
console.log($('#test').data('filterstring'));
console.log($('#test').data('filterString'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test" data-filterString="value1" data-filter-string="value2"></div>
I am a very beginner to mvc and ajax both.
I have tried many examples on net but I don't understand how ajax is used practically?
I have a controller named members which has GetAllMembers Method.
GetAllMembers returns a List<Members>
Now I want to use JQuery and ajax something like :
$(document).click(function () {
$.ajax({
url: "Members/GetAllMembers",
success: function () {
},
error: function () {
alert("Failed to get the members");
}
});
});
Is my URL right?
Upon success I want to display that List in a ListBox.
How can I get it? Can anyone give me a start?
$.ajax({
type: "POST",
url: "Members/GetAllMembers", //Your required php page
data: "id="+ data, //pass your required data here
success: function(response){ //You obtain the response that you echo from your controller
$('#Listbox').html(response); //The response is being printed inside the Listbox div that should have in your html page.
},
error: function () {
alert("Failed to get the members");
}
});
Hope this will help you.. :)
$(document).click(function () {
$.ajax({
url: "Members/GetAllMembers",
success: function (result) {
// do your code here
},
error: function () {
alert("Failed to get the members");
}
});
});
So your request give response in "result" variable. So you have to easily manage result variable value in foreach loop and set value in ListBox HTML.
Follow this example:
suppose you have this html:
<p>List Box - Single Select<br>
<select id="listBox" name="listbox">
</select>
</p>
So we have this js:
var template = '<option value="$value">$name</option>';
var getAllMembers = function() {
$.ajax({
url: 'Members/GetAllMembers',
dataType: 'json', //Assuming Members/GetAllMembers returns a json
success: function(response) {
$.each(response, function(index){
var option = template.replace(/\$value/g, this.value)
.replace(/\$name/g, this.name);
$('#listBox').append(option);
});
}
});
};
EDIT: Now you only need to call getAllMembers(); function.
Hope this help.
Pablo.