Result box not displaying the expected JQuery UI Autocomplete results

Can someone assist me with Autocomplete? When I search for an RTO code, the result box appears but without a list (refer to Screen : 1). However, when I press the down arrow button on the keyboard, the list starts appearing one by one (as shown in Screen : 2 - 3).

I need help to display the results in the result box.

Screen:1

Screen:2

Screen:3

Expected Result

Below is 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>

Answer №1

Here is a code snippet that uses AJAX for autocomplete functionality:

$(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
  });
});

This code utilizes the Autocomplete feature in jQuery UI. It sends a request to a specified URL using AJAX and expects a JSON response to populate the autocomplete dropdown. Make sure to check your Network tab in the Web Console to verify correct payload sending and receiving responses.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can one quickly display a confirmation dialog box within react-admin?

Looking for a way to implement a confirmation dialog in my react-admin project, similar to JavaScript's alert function but more visually appealing. I want the user to only proceed with certain database operations if they click OK on the dialog. I cou ...

What is the process for linking my Next.js application with MongoDB Compass?

Currently, I am working on a project in Next.js called NetMapper where I am developing a web interface for the CLI tool nmap. My main focus right now is creating Sign In/Sign Up forms and storing user information in MongoDB Compass. Despite trying various ...

A script in PHP or JavaScript that dynamically generates two dual drop-down menus to assist with data selection

I have experience with php scripting, but I am facing challenges when trying to combine it with JavaScript. The issue arises when I have a form that includes dropdown menus for categories and subcategories. When a category is selected, the options in the s ...

When used, the jQuery selector returns the PreviousObject rather than the object that was selected initially

I'm currently attempting to add a second menu to my website alongside the top menu. I have multiple menus set up in two bootstrap columns (col-8 and col-4). Initially, when I used jQuery selectors outside of a function, everything worked smoothly. How ...

Executing the command "node <app name>" does not result in any action

I am experiencing an issue with my bot app called "vgen.js". When I run the command "node vgen", the prompt/directory disappears and the cursor just blinks on the far left of the screen. I have been following instructions from a tutorial found here: https ...

"Exploring the world of JavaFX: Unveiling the mysteries

Here are some CSS queries: How can I create a semi-transparent color using a color variable in CSS? * { -my-color: #123456; } .label { -fx-text-fill: ??? } What should be inserted in "???" to achieve a 50% opacity version of -my-color? Is it be ...

Utilize the power of modern Javascript to extract and display data from a JSON file by mapping an array and adding it

I've been attempting to construct a table from a JSON file by utilizing the map method in React. I've experimented with two approaches - one using map and the other using a for loop - but so far, I haven't been successful in getting the desi ...

How do you typically approach testing Cloud Code on Parse?

While working on developing a substantial amount of business logic in webhooks like beforeSave/afterSave/etc. using Parse.com, I have encountered some challenges as a JavaScript/Parse beginner. The process seems somewhat tedious and I'm questioning if ...

Retrieve specific information by clicking a button within a table cell on the data grid in React.js

I am just starting out with React and have a query. I have set up a data table with some dummy information using a React data table. How can I make the cells of the table clickable so that when clicked, the data is displayed on a form located on the same p ...

"Error message: PHP throwing an undefined index error when using

I am struggling with a specific issue regarding sending POST data to a PHP file for database insertion. Despite looking at various solutions, I keep encountering a PHP notice stating undefined index arg1 and arg2. Below is the ajax code snippet: function ...

When inspecting an array in HTML form, it appears that only the initial result is being generated upon using var_dump()

Below is the HTML and jQuery code that generates a form allowing users to add multiple input fields with the same names: skillName[] and skillLevel[]: $(document).ready(function() { var max_fields = 100; var wrapper = $(".wrapper"); var add_button ...

Issues with applying styles to custom components in styled-components

I attempted to customize the inner elements of react-id-swiper using the code below: import Swiper from 'react-id-swiper'; import styled from 'styled-components'; const MySwiper = ({ className, children }) => ( <Swip ...

Transferring information using jQuery Ajax and fetching results in PHP

I'm facing an issue with incorporating Jquery Ajax and PHP. My objective is to transmit data from my script to a php file for further processing. However, I'm encountering a situation where I'm not receiving any response from the php... Bel ...

The state value in React useContext remains unchanged when navigating between pages

Currently, I am delving into the useContext hook and experimenting with a shopping cart exercise in Next.js with app router. This exercise involves managing the cart's value globally. However, I encountered an issue when trying to pass the updated ca ...

The clone() function in jQuery causes the properties of the original element to become distorted

Seeking help with a curious issue I'm encountering. After selecting a radio button and cloning it, the original radio button becomes unchecked while the cloned one behaves as expected. Any insights into why this might be happening would be greatly app ...

Why do React JS array objects reset when being updated?

I am working with an array of objects that contain IDs and prices. Whenever the onClick event is triggered, it updates the price of a specific object. However, upon clicking the event again, I noticed that the previously updated item's price gets rese ...

Utilize nodemailer in Angular 6 to effortlessly send emails

I am currently experiencing an issue with my email service form in my Angular 6 application integrated with Node.js. I have set up the form using Bootstrap and Nodemailer for sending emails, but it seems to not be working as expected. Whenever I attempt to ...

Efficiently storing multiple file fields in Django with the help of jQuery and Ajax

I need assistance with saving multiple file fields to a server. The fields are dynamic, allowing users to upload as many files as they want using an add button. I prefer not to use form submit or dropzone. Can someone please advise me on how to achieve thi ...

Choosing elements in jQuery

Having some trouble with the subnav on my current website project. I think the issue lies in how I am selecting items in my jquery code. It seems like a small fix that needs to be made, but I'm unsure of the correct approach. http://jsfiddle.net/ZDEr ...

Axios.post makes the request twice

Can anyone help me with an issue regarding axios.post where it sends the same request twice with identical data? I have searched online for a solution but haven't found anything. Any ideas on how to resolve this problem? https://i.sstatic.net/lXTss.p ...