16100

Mismatch of Autocomplete textbox design

Question:

i have used a ready made code and implement it in my project. now that code is working fine in one textbox and it is also get output. when i use it for another text box it was get the result from server side but somehow it wont display in client side.

@model IEnumerable<UMS.Models.UserDetail> .... <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery-ui-1.9.0.min.js"></script> .... @using (Html.BeginForm("Index", "UserDetails", FormMethod.Get)) { @Html.TextBox("SearchName", "", new { @class = "control-label col-md-2", Style = "margin-right:10px;", placeholder = "Name", id = "txtUserName" }) @Html.TextBox("SearchEmail", "", new { @class = "control-label col-md-2", Style = "margin-right:10px;", placeholder = "Email", id = "txtEmail" }) @Html.DropDownList("SearchDesignation", ViewBag.DesignationList as SelectList, "Select", new { @class = "control-label col-md-2", Style = "margin-right: 10px; margin-top: 5px; height: 32px;" }) <input type="submit" value="Search" onclick="location.href='@Url.Action("Index", "Users")'" /> } <table class="table"> .... </table> <script type="text/javascript"> $("#txtUserName").keypress(function () { $("#txtUserName").autocomplete({ source: function (request, response) { $.ajax({ url: "/UserDetails/SearchName", type: "POST", dataType: "json", data: { Prefix: request.term }, success: function (data) { response($.map(data, function (item) { return { label: item.Name, value: item.Name }; })) } }) }, messages: { noResults: "", results: "" } }); }) $("#txtEmail").keypress(function () { $("#txtEmail").autocomplete({ source: function (request, response) { $.ajax({ url: "/UserDetails/SearchEmail", type: "POST", dataType: "json", data: { Prefix: request.term }, success: function (data) { response($.map(data, function (item) { return { label: item.Name, value: item.Name }; })) } }) }, messages: { noResults: "", results: "" } }); }) </script>

above is my code for that. here i have attach two images. In one image you can see the result while in other only dot is display<a href="https://i.stack.imgur.com/lYqrC.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/lYqrC.png" data-original="https://i.stack.imgur.com/lYqrC.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a><a href="https://i.stack.imgur.com/0WEn2.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/0WEn2.png" data-original="https://i.stack.imgur.com/0WEn2.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Answer1:

You shouldn't write initialization code in events that occurs multiple times. Every time the event occurs it just re-initializes the widget instead of letting it do it's work. Your code should be:

<pre class="lang-js prettyprint-override">$("#txtUserName").autocomplete({ source: function(request, response) { $.ajax({ url: "/UserDetails/SearchName", type: "POST", dataType: "json", data: { Prefix: request.term }, success: function(data) { response($.map(data, function(item) { return { label: item.Name, value: item.Name }; })) } }) }, messages: { noResults: "", results: "" } });

Answer2:

You can test it after success

$(document).unbind('keypress');

Recommend

  • Copying text from IFRAME into the INPUT field on the parent page
  • Search value in csv file using c# [closed]
  • Backbone View not refreshing even when Collection gets Refreshed
  • Kendo MVC: Adding Edit, Delete Buttons to Grid
  • Form in HTML Email Not Posting Data
  • Not getting the object values or formcollection values
  • ASP.NET MVC + Retrieving one to many relationship using jQuery Tab
  • get user role from database based on user id in angular
  • Custom Ajax Binding does not work properly
  • CakePHP email configuration
  • Why am I getting a MissingMethodException when calling F# code from PowerShell?
  • 500 internal server error in ruby on rails
  • scrollOverflow not working in fullPage.js
  • Search function not doing anything
  • How to save dynamically created textboxes and their values
  • apply a javascript function to draggable copy
  • Implement JwtBearer Authentication in NSwag SwaggerUi
  • How to add a focus style to an editable ComboBox in WPF
  • Using JRuby with Rails 3.2
  • Email format validation in mvc3 view
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Change JButton Shape while respecting Look And Feel
  • Nant, Vault & Windows Integrated Authentication
  • req.body is undefined - nodejs
  • RectangularRangeIndicator format like triangular using dojo
  • Bug in WPF DataGrid
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Modifying destination and filename of gulp-svg-sprite
  • javascript inside java/jsp code
  • Importing jscolor library in angular 2
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • Rearranging Cells in UITableView Bug & Saving Changes
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Proper way to use connect-multiparty with express.js?
  • Java static initializers and reflection
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?