Develop Reference

Jquery Autocomplete not populating after error thrown

I am running a ASP.Net MVC application and using jQuery's Autocomplete in one of the textboxes to populate contract numbers after the 6th digit/character.
It is working flawlessly, until after an error is thrown for a validation check.
My code :
$(document).ready(function () {
$("#ContractNumber").autocomplete({
source: '#Url.Action("GetContractId")',
open: function () { $('ul.ui-autocomplete').hide().fadeIn() },
close: function () { $('ul.ui-autocomplete').show().fadeOut() },
minLength:6
});
});
The code that redirects to the correct controller to get the contract number is here:
$(document).ready(function () {
//$('body').on('focus', "#ContractNumber", function () {
$("#ContractNumber").autocomplete({
source: function (request, response) {
$.ajax({
url: "/PurchaseRequestDetail/GetContractId",
minLength: 1,
data: { Prefix: request.term },
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return { label: item.Name, value: item.Name };;
}))
}
})
}
});
Here is the autocomplete that is working fine, before the error:
I wanted this autocomplete to work, on focus of the textbox, whether a validation error thrown or not.
validation error:
The code that checks for ModelState if contract number is not found :
if (contractNo is null)
{
// row.ContractId = foundList.ContractId;
db.PurchaseRequestDetail.Add(newRow);
db.SaveChanges();
}
else if (contractNo != null)
{
if (foundList is null)
{
ModelState.AddModelError("ContractNumber", "Contract Number not in the database.");
// reload the drop down lists, they don't survive the trip to the server and back
viewModel.ContractList = GetContractList(viewModel.ContractId);
return View("CreateEdit", viewModel);
}
}
Any pointers in correcting this would be helpful.
TIA.

Auto Complete Popup not working properly on cloned elements

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: ""
}
});
});

Error: object doesn't support 'autocomplete'

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.

Get value from autocomplete dropdown

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: ""
}
});

show a dialog box , when hovering over the auto complete records

I have the following JavaScript code to do an autocomplete:
$("#Technology2_Tag").autocomplete({
source: function (request, response) {
$.ajax({
url: "#Url.Content("~/Switch/AutoComplete2")",
dataType: "json",
minLength: 2, delay: 2000,
data: {
term: request.term,
SearchBy: $("#ChoiceTag").prop("checked") ? $("#ChoiceTag").val() : $("#ChoiceName").val(),
},
success: function (data) {
response(data);
}
});
},
});
And I am returning the autocomplete records as JSON:
public ActionResult AutoComplete2(string term, string SearchBy)
{
if (SearchBy == "Tag")
{
var tech = repository.AllFindTechnolog(term).OrderBy(p => p.Tag).Select(a => new { label = a.Tag }).ToList();
return Json(tech, JsonRequestBehavior.AllowGet);
}
else
{
var tech = repository.FindActiveResourceByName(term, true).OrderBy(p => p.RESOURCENAME).Select(a => new { label = a.RESOURCENAME }).ToList();
return Json(tech, JsonRequestBehavior.AllowGet);
}
}
But my question is how I can show a dialog the contains additional info about the record, when the user hovers over an autocomplete record.
what i am thinking of is as follows:
when the user hovers over any autocomplete record, to fire a JavaScript function.
the function calls an action method, that returns JSON.
to build the dialog box using the returned JSON object.

First you need to create a div let's say with the id=mydiv which can be a dialog. Initialize it as a dialog.
Then in your autocomplete use focus event. Which will handle an Ajax function which will call an Action (this action can return a Partial view) and will fill your div with the description.
$("#mydiv").dialog();
$ ("#Technology2_Tag").autocomplete({
source: function (request, response) {
$.ajax({
url: "#Url.Content("~/Switch/AutoComplete2")",
dataType: "json",
minLength: 2, delay: 2000,
data: {
term: request.term,
SearchBy: $("#ChoiceTag").prop("checked") ? $("#ChoiceTag").val() : $("#ChoiceName").val(),
},
success: function (data) {
response(data);
}
});
},
focus: function(event,ui){
var element =ui.item.val;
$.ajax({
url: "#Url.Content("~/Switch/ActionDescription")",
dataType: "json",
data: {
hoverelment: element },
success: function (data) {
$('#myDiv').append(data);
$('#myDiv').show();
}
});
}
});
I gave you lines, you have to create another action which will receive a parameter, can send a partial view or just string.
public ActionResult ActionDescription(string hoverlement)
{
.........//linq queries to retrieve description by hoverelement
}
I hope it will help.