I need to assign value from dropdown to autocomplete textbox ..till Now I have done this
But You can see I can't assign value from Dropdown to textbox ..
I have implemented auto complete feature by a JQuery PlugIn "Prop.js"
this is the code I have created
<link href="~/Content/popr.css" rel="stylesheet" />
<script src="~/Scripts/popr.js"></script>
<script src="~/Scripts/popr.min.js"></script>
<div id="address" >
<label>Country</label>
<table>
<tr>
<td>#Html.TextBox("Country")</td>
<td>
<div class="popr" data-id="demo">^</div>
<div class="popr-box" data-box-id="demo">
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#Country").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Location/GetAllCountry",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response(data);
}
})
},
appendTo: '#menu-container',
messages: {
noResults: "", results: ""
}
});
$.ajax({
url: "/Location/GetAllCountry",
type: 'POST',
data: { term: "" },
success: function (states) {
var $select = $('div[data-box-id="demo"]');
$.each(states, function (i, state) {
$('<option>', {
value: state
}).html(state).appendTo($select)
.addClass("popr-item");
});
},
error: function (xhr) { alert("Something seems Wrong"); }
});
});
$('.popr').popr();
$('.popr').popr({
'speed': 200,
'mode': 'bottom'
});
I have searched the solution the tried for a click inside div to get selected value
$(".popr-item").click(function (e) {
e.stopPropagation();
});
$(".popr-box").click(function (e) {
e.stopPropagation();
alert("popr-box");
});
this is not working
I tried another plugin "chosen" .. But it fails in cascading dropdown ..I am not in a position to try another plugin ... I strictly want to use by this way
if there is another plugin available , I need to see example with cascading dropdown specifically
I just need selected value from dropdown , How Can I achieve this ?
Add this select option in autocomplete
$("#Country").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Location/GetAllCountry",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response(data);
}
})
},
select: function( event, ui ) {
$( "#Country" ).val( ui.item.label );
return false;
},
appendTo: '#menu-container',
messages: {
noResults: "", results: ""
}
});
Related
I'm trying to get result of Autocomplete.when I search for RTO code then result box showing with no list as shown in screen : 1 but when I click on down arrow button from keyboard the it is showing the list one by one on click of down arrow button as shown in screen : 2 - 3
Please help me to show the result in result box.
Screen:1
Screen:2
Screen:3
Expected Result
Here is the my script
$(document).ready(function () {
$("#RTOCode").autocomplete({
source: function (request, response) {
var _RTOCityList = {
RTOCityCode: $("#RTOCode").val(),
}
if (_RTOCityList.RTOCityCode != "") {
$.ajax({
type: "POST",
data: JSON.stringify(_RTOCityList),
contentType: "application/json; charset=utf-8",
url: "/Localhost/BindRTOCity",
dataType: "json",
async: false,
success: function (data) {
response($.map(data.jsBindDataList, function (item) {
return { label: item.RTOCityCode, value: item.RTOCityCode, RTOCityName: item.RTOCityName, RTOCityCode: item.RTOCityCode };
}))
}
})
}
else {
$("#RTOCode").val("");
}
},
select: function (e, i) {
$("#RTOCity").val(i.item.RTOCityName);
$("#hdn_RTOName").val(i.item.RTOCityName);
$("#hdn_RTOCode").val(i.item.RTOCityCode);
},
minLength: 2,
autoFocus: true
});
});
<style>
.ui-autocomplete {
z-index: 1050;
height: 200px;
}
</style>
<div class="col-sm-6">
<label for="RTOCode" class="required">RTO Code</label>
<input type="text" name="RTOCode" id="RTOCode" />
</div>
Consider the following code. Due to the nature of AJAX, I am unable to test.
$(function() {
$("#RTOCode").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
data: JSON.stringify(request),
contentType: "application/json; charset=utf-8",
url: "/Localhost/BindRTOCity",
dataType: "json",
async: false,
success: function(data) {
response($.map(data.jsBindDataList, function(item) {
return {
label: item.RTOCityCode,
value: item.RTOCityCode,
RTOCityName: item.RTOCityName,
RTOCityCode: item.RTOCityCode
};
}))
}
});
},
select: function(e, i) {
$("#RTOCity").val(i.item.RTOCityName);
$("#hdn_RTOName").val(i.item.RTOCityName);
$("#hdn_RTOCode").val(i.item.RTOCityCode);
return false;
},
minLength: 2,
autoFocus: true
});
});
.ui-autocomplete {
z-index: 1050;
height: 200px;
}
<div class="col-sm-6">
<label for="RTOCode" class="required">RTO Code</label>
<input type="text" name="RTOCode" id="RTOCode" />
</div>
For Autocomplete, when using a Function for Source, request object that contains element term. Therefore, request.term will be the value of the text field. Since you have it set to minLength of 2, there will never be a chance for the value to be empty ("").
You will need to use your Web Console and investigate the Network tab to view the payloads and ensure that you're sending the right details and getting the right response.
I am unable to explain it properly,so i have added the image,please help me with this and please dont down vote.
Hi i am cloning the div on button click,and i want the auto complete box on the cloned elements also. on first element it is working fine but on cloned element the auto complete box(popup) is showing on 1st element but it should be shown on newly created textbox
following is the html code
<div class="repeatingSection">
<input id="Jobs[0].SampleType" name="Jobs[0].SampleType" type="text" class="form-control classSampleType" placeholder="Sample Name" required />
Add Job
following is the js code for cloning
function resetAttributeNames(section) {
var tags = section.find('input,button'), idx = section.index();
tags.each(function () {
var $this = $(this);
$.each(attrs, function (i, attr) {
var attr_val = $this.attr(attr);
if (attr_val) {
$this.attr(attr, attr_val.replace(/\[\d\]/,'['+(idx-5)+']'))
}
})
})
}
$('.addJob').click(function (e) {
e.preventDefault();
var lastRepeatingGroup = $('.repeatingSection').last();
var cloned = lastRepeatingGroup.clone(true)
cloned.find("input").val("");
cloned.insertAfter(lastRepeatingGroup);
resetAttributeNames(cloned)
});
and following is the code for auto completion
$(".classSampleType").click(function () {
var index = $(".classSampleType").index(this);
$("#Jobs\\["+index+"\\]\\.SampleType").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Lab/GetSampleType",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response(data);
}
})
},
messages: {
noResults: "", results: ""
}
});
});
For Reference i have added the image Reference Image
worked for me by making following changes
var cloned = lastRepeatingGroup.clone(true,false)
$(document).on('click','.classSampleType',function () {
var index = $(".classSampleType").index(this);
$("#Jobs\\["+index+"\\]\\.SampleType").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Lab/GetSampleType",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
response(data);
}
})
},
messages: {
noResults: "", results: ""
}
});
});
I have this function using the jquery autocomplete widget, that I am getting the following error:0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'autocomplete'
On my html page, in the head section I have included the following tags.
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
The function is called by a variety of option button calls to do several different query's. I have this function in a different application that works well but here it is not.
function AutoComplete(Type) {
//create AutoComplete UI component
$("#txtCriteria").autocomplete({
source: function (request, response) {
$.ajax({
autoFocus: true,
async: false,
delay: 250,
url: "wsReports.asmx/AutoComplete",
data: "{'Type':'" + Type + "', 'filter':'" + request.term + "'}",
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 {
label: item.ACName,
value: item.ACCode
} // end of return
})) // end of response
} // end of success
}); // end of ajax
}, // end of source
select: function (event, ui) {
if (ui.item.value == "") {
alert("nothing to select");
}
else {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox and hidden field
$(this).val(ui.item.label);
}
}, // end of select
change: function (event, ui) {
if (!ui.item) {
$(event.target).val('');
}
},
}) // end of txtCriteria.autocomplete
} // end of AutoComplete
Any ideas why it is not recognized in the above situation?
My fault. The jquery.js and bootstrap were loading after the jquery-ui.
im using autocomplete to retrieve data from the database
$('input[name=\'product_name\']').autocomplete({
'source': function(request, response) {
$.ajax({
url: 'index.php?route=checkout/cart/autocomplete&name=' + encodeURIComponent(request), //Controller route
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item['name'],
value: item['product_id']
}
}));
}
});
},
'select': function(item) {
$('input[name=\'product_id\']').val(item['value']);
$('input[name=\'product_name\']').val(item['label']);
},
focus: function(event, ui) {
return false;
}
});
i already put the focus return false but my dropdown arrow keys still not working.
i also tried using event.preventDefault();
There is some problem with your select event handler of jquery-ui-autocomplete. So try this script -
$('input[name=\'product_name\']').autocomplete({
source: function(request, response) {
$.ajax({
url: 'index.php?route=checkout/cart/autocomplete&name=' + encodeURIComponent(request), //Controller route
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item['name'],
value: item['product_id']
}
}));
}
});
},
select: function(event , ui) {
$('input[name=\'product_id\']').val(ui.item.value);
$('input[name=\'product_name\']').val(ui.item.lable);
},
focus: function(event, ui) {
return false;
}
});
jquery-ui-autocomplete event select callback specified:
$( ".selector" ).autocomplete({ select: function( event, ui ) {} });
And hope this will solve your issue.
In my page I have a select menu inside:
<div class="div1" style="float: left">
<strong>Cerca Prodotto</strong>
<br/><br/>
<form class="form">
<div><input type="text" id="tags" value=""></div>
<div>
<img class="btnaggiungi" src="http://lainz.softwebsrl.it/img/carrello.jpg" alt="Aggiungi" id="add_newProduct"/>
</div>
</form>
</div>
which is controlled and generated by the following jQuery:
$( "#tags" ).autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
url: "http://lainz.softwebsrl.it/ajax/autocompletecibo",
dataType: "json",
crossDomain: true,
type : 'post',
data:
{
valore: request.term,
},
success: function (data)
{
response(data);
console.log(data);
}
});
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, data ) {
var selezione = data.item.label;
$.ajax({
type : 'POST',
url: "http://lainz.softwebsrl.it/ajax/autocompletecibolista/valore/"+selezione,
dataType: "html",
success: function(msg){
$(".div2").html(msg);
},
error: function()
{
alert("Chiamata fallita, si prega di riprovare...1");
}
});
}
});
Now I need to add a mouse over event on every entry. I mean that when the user puts the mouse over an opion of the list, there are some other js code to be executed which, in the end, will show a map. How shall I add it?
UPDATE
This could be a solution:
<script>
$(document).on("mouseenter", "li", function() {
$(".div5").show();
});
$(document).on("mouseleave", "li", function() {
$(".div5").hide();
});
</script>
You have to bind the event to the static elements and then delegate it to your dynamically generated ones. I mean if <div class="div1"> is the container for your dynamically generated HTML, you have to do something like this:
$('.div1').on('mouseover','.div2 .dynamicallyGeneratedList',function(){
console.log('do something');
})
Your question is'nt quite entirely. How does your data response look like? Maybe does this help you.
$(data).each(function() {
var $li = $("<li>"+data+"</li>");
$li.bind("mouseover", showMap);
$("ul").append($li);
});
function showMap() {
// show map
}