I working on asp.net MVC project . I face issue after display Line Manager Name on autocomplete .
autocomplete functionality working success but issue happen after display data on input .
Line Manager name hidden after 1 second or less so why this happen this behavior happen on some computers and another not happen .
Call Web api using jquery Ajax search for employee no like '%1234%' then display similar
Web api
jquery Ajax
result after select employee no it display Line Manager Name related on LineManagerName
LineManagerName
but issue within 1 second or less After autocomplete display Line Manager Name become hidden
so why that happen
$(document).ready(function () { $("#txtLineManagerId").autocomplete({ source: function (request, response) { var searchText = $("#txtLineManagerId").val(); console.log("search text" + searchText) $.ajax({ url: '@Url.Action("GetAllEmployeeBasedSearchText", "Resignation")', data: { searchText: searchText }, method: "GET", dataType: "json", success: function (data) { response($.map(data, function (item) { return { label: item.EmployeeID, value: item.EmployeeID, employeeName: item.EmployeeName }; })) } }); }, position: { my: "right top", at: "right bottom" }, appendTo: '#searchContainer', select: function (event, ui) { $("#LineManagerName").val(ui.item.employeeName); }, minLength: 4, }); $("#txtLineManagerId").change(function () { var searchText = $("#txtLineManagerId").val(); console.log("search text" + searchText) $.ajax({ url: '@Url.Action("GetAllEmployeeBasedSearchText", "Resignation")', data: { searchText: searchText}, method: "GET", dataType: "json", success: function (data) { response($.map(data, function (item) { return { label: item.EmployeeID, value: item.EmployeeID }; })) } }); }); html controls using html helper <div class="col-md-5"> @Html.LabelFor(model => model.LineManager, htmlAttributes: new { @class = "control-label" }) <span class="text-danger"> *</span> </div> <div class="col-md-7"> @Html.EditorFor(model => model.LineManager, new { htmlAttributes = new { @class = "form-control", id = "txtLineManagerId" } }) @Html.ValidationMessageFor(model => model.LineManager, "", new { @class = "text-danger" }) </div> <div class="form-group col-md-6 hover"> <div class="col-md-5"> @Html.Label("Line Manager Name", htmlAttributes: new { @class = "control-label" }) <span class="text-danger"> *</span> </div> <div class="col-md-7"> @*<input type="text" id="LineManagerName" class="form-control" />*@ @Html.EditorFor(model => model.LineManagerName, new { htmlAttributes = new { @class = "form-control", id = "LineManagerName" } }) <input type="hidden" id="selectedEmployeeName" name="selectedEmployeeName"> </div> </div>
Explain Issue Sample Case
Employee No on database Table employee have 3 employee 123456 123457 123458
123456 123457 123458
user add on input 1234 it display 3 employee 123456 123457 123458
suppose user select 123456 then it display name related on Line Manager Name success
but after 1 second or less Line Manager Name become hidden so Why This Happen
And How to solve it