Tips for showing the selected element from an autocomplete list with Event handling

How can I show the selected element after choosing from the autocomplete list?

This is my current code:


$(function () {

    $("#SearchString").autocomplete({
        messages: '',
        source: '@Url.Action("GetProducts","Search")',
        minLength: 2,
    });

});

<div id="search" style="display:inline">

@using (Html.BeginForm("SearchProduct", "Search", FormMethod.Post, "null")) {

    @Html.TextBox("SearchString", null, new { id = "SearchString" })

    <input type="submit" value="Search" id="Search" />
}

</div>

I would appreciate any suggestions or feedback on how to improve this functionality.

Answer №1

To enhance the functionality of autocomplete, make sure to include the select event:

$("#SearchString").autocomplete({
                    messages: '',
                    source: '@Url.Action("GetProducts","Search")',
                    minLength: 2,
                    select: function (i, j) 
                    {
                    alert(j.item.value);
                    }

                });

For more information on how to utilize autocomplete, refer to the official documentation

Explore a live example in this Fiddle Demo

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

The second parameter of the Ajax request is not defined

Having an issue with my Ajax request in Vue.js where the second parameter is logging as undefined in the console. I've been trying to fix this problem but haven't found a solution yet. This is the code snippet for $.ajax(): //$.ajax() to add ag ...

Verify whether the content within the Div has been modified

I am currently making changes to content within a <div> element. I would like to determine if the data in the <div> has been modified and, if so, save it in a session to persist on refresh. How can I verify if the data has been edited and then ...

Refreshing Appended Content Using JQuery AJAX

Here is the script I'm working with: <script> $(document).ready(function() { $('#signUpForm').submit(function() { $.ajax({ type: 'POST', url: "process.php", data: $("#signUpForm").serialize(), success: function(d ...

Using Spring Boot to create a multiple select feature with Materialize CSS

Currently engaged in a Spring Boot project utilizing Materialize CSS for the frontend. Everything runs smoothly when running the HTML file independently, with the Materialize CSS multiple select feature working perfectly. However, upon integrating the HTML ...

What is the best way to halt an asynchronous method as a user?

How can I implement a mechanism that allows a user to stop an async method in MVC? My idea for implementation is as follows: public string stopToken { get; set; } public int iteration { get; set; } public async Task<string> someActionAsync() { ...

Having difficulties fetching the post content in Wordpress using AJAX

I am currently working on ajaxifying my Wordpress theme by utilizing the ajax-in-WordPress method as detailed on this page. However, I am encountering an issue when attempting to retrieve the content of a post using get_the_content function within function ...

How does Angular5 perform with Bootstrap4?

Currently working on an Angular5 application and considering integrating bootstrap into it. I imported Bootstrap4, which includes dependencies on JQuery and Popper.js. Another option I came across is utilizing CSS grid for more versatility compared to boo ...

Once the page is refreshed, the checkbox should remain in its current state and

I have a challenge with disabling all checkboxes on my page using Angular-Js and JQuery. After clicking on a checkbox, I want to disable all checkboxes but preserve their state after reloading the page. Here is an example of the code snippet: $('# ...

Initiating a YouTube video with a click on its thumbnail image - a jQuery tutorial

I am currently working on code that successfully displays YouTube videos. However, I would like the video to start playing when the cover image is clicked. How can I achieve this functionality? Thank you for your help! <div id="video" style="display: ...

What is the most effective method to exhibit every element within a content wrapper at a specific interval of time?

I am looking for a way to display each div within the content-wrapper after a specific time interval. Currently, I am using individual classes like el1, el2, el3, ... to accomplish this task. However, when dealing with content-wrappers containing multipl ...

What is the best way to switch between components when clicking on them? (The component displayed should update to the most recently clicked one

I am facing a challenge in rendering different components based on the navbar text that is clicked. Each onclick event should trigger the display of a specific component, replacing the current one. I have 5 elements with onclick events and would like to re ...

What's the best way to incorporate necessary styles into text using particular fonts?

Is there a way to set letter spacing and word spacing for text on my website with the font 'classylight'? Adding classes to each post in the site map seems like a lengthy process. To save time, I attempted to use the attribute*=style property to ...

Retrieve the link of a nearby element

My goal is to create a userscript that has the following functionalities: Add a checkbox next to each hyperlink When the checkbox is clicked, change the state of the corresponding hyperlink to "visited" by changing its color from blue to violet. However ...

An unexplained line break is being added to content loaded via ajax requests

When using either .ajax or .load to load content from an .html page and insert it into an element, I am experiencing a strange issue where a mysterious new line is appended after the content. It is not a break element, but more like a \n or \r ch ...

Assistance needed with updating a related element using jQuery AJAX upon successfully completing a

Currently, I am in the process of creating a database-driven jokes website where users have the ability to vote on their favorite jokes. Each time a user votes for a joke, the "score" column in the MySQL database is incremented. Now, my main concern is upd ...

Utilizing FullCalendar for showcasing comprehensive details

I'm a big fan of the fullcalendar plugin and all its amazing features. I want to enhance it by displaying more customized information for each event when in agendaWeek or agendaMonth view. Switching between views is easy, but I need help filtering out ...

challenges arise when using star icons to rate items visually, as the corresponding hidden values for backend processing are linked to radio input types

Hello, I am trying to retrieve the value of an input type radio by clicking on a star image visually. I have been successful in this, but I am having trouble resetting the star image in another row. You can view a demo of this here. I will explain what I ...

Display a loading animation while waiting for the AJAX response

I am working with a seat chart in SVG format on my website. I want to display a loading gif when a user clicks on a seat, and then hide the loading gif once the AJAX response is returned. However, the code I have written for this functionality is not wor ...

Conceal the navbar during the process of the ajax loader loading

My current issue involves utilizing an AJAX loader to conceal my page until all elements have loaded. Unfortunately, the navbar is not hidden along with the other content as shown in the image below. I need assistance in ensuring that everything, including ...

"Returning undefined: The outcome of using jQuery's .html() method on

I am having an issue with the JavaScript function I have created to load content from another URL into the current document. For some reason, both contentHtml and menuHtml variables are showing as undefined. Can someone please help me identify where I we ...