The autocomplete feature appears to be malfunctioning

I'm encountering an issue with my jQuery autocomplete feature.

Here is what it looks like: Autocomplete error

This is the code I am using:

<div>
    @using (Ajax.BeginForm("Vyhledej", new AjaxOptions() { UpdateTargetId = "dynamicContent", InsertionMode = InsertionMode.Replace }))
    {
        <div class="form-group" role="group" aria-label="Basic example">
            <input type="text"  style="width:350px; margin-right:4px; " class="form-control pull-left" placeholder="Zadej značku" id="searchBox" name="shoda">
            <button type="submit" class="btn-sm btn-default pull-left">Vyhledat</button>
        </div>
</div>

And here is the JavaScript used:

> <script type="text/javascript">
>     $(function () {
>         $("#searchBox").autocomplete({
>             source: function(request, response) {
>                 $.ajax({
>                     url: "@Url.Action("VyhledejKolobezky", "Kolobezky")",
>                     dataType: "json",
>                     data: {
>                         query: request.term
>                     },
>                     success: function(data) {
>                         response(data);
>                     }
>                 });
>             },
>             minLength: 2
>     });
>     }); </script>

Any suggestions or ideas on how to solve this? Thanks in advance.

Answer №1

Make sure to include the necessary jQuery UI autocomplete css stylesheet for your project.

Your bundle configuration should resemble the following:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
              "~/Content/themes/base/jquery.ui.autocomplete.css"));

Remember that you must also add any other required stylesheets to your stylebundle as well.

To add it correctly, use the following syntax:

@Styles.Render("~/Content/themes/base/css")

If you wish to include all JQuery UI stylesheets in your StyleBundle, you can do so by incorporating them like this:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
              "~/Content/themes/base/jquery.ui.core.css",
              "~/Content/themes/base/jquery.ui.resizable.css",
              "~/Content/themes/base/jquery.ui.selectable.css",
              "~/Content/themes/base/jquery.ui.accordion.css",
              "~/Content/themes/base/jquery.ui.autocomplete.css",
              "~/Content/themes/base/jquery.ui.button.css",
              "~/Content/themes/base/jquery.ui.dialog.css",
              "~/Content/themes/base/jquery.ui.slider.css",
              "~/Content/themes/base/jquery.ui.tabs.css",
              "~/Content/themes/base/jquery.ui.datepicker.css",
              "~/Content/themes/base/jquery.ui.progressbar.css",
              "~/Content/themes/base/jquery.ui.theme.css"));

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

Incorporate text onto an image using Semantic UI

Currently, I am utilizing Semantic UI to display images. While it is functioning well for me in terms of adding text near the image, I desire to have the text positioned on top of the image. Ideally, I would like it to be located on the lower half of the i ...

showing data retrieved from the database

While working with asp.net and c#, I ran some database operations to display data in a form but encountered a blank screen. Clicking the button should populate the form with values from the database without using gridview or datagridview, however, this fun ...

Components from Bower are currently not available

Trying to automate the injection of bower components into my HTML using grunt-wiredep. It seems simple enough, but I'm having trouble setting the correct path to the bower directory when running localhost. Currently, I'm receiving this error: ht ...

Is it possible to nest clicks for ajax calls within the results of a previously appended call?

As I dive into learning about AJAX to enhance page loading speed by avoiding reliance on PHP for displaying results, I've encountered a challenge. I have three tiers of data distributed across three database tables: The first tier of data is fetche ...

Implementing CSS Pre-loading in an Angular Application with Webpack and Heroku

My current setup involves an Angular application (v4.0.1) with webpack deployed on Heroku. I have a loading spinner in place to show while the app is loading, and it works well locally. However, when deployed on Heroku, the loading spinner (specifically th ...

Modify the content of an element upon hovering over a different element

I have a set of three buttons and I want the text displayed in a box to change based on which button is being hovered over. If no button is being hovered, the default text should be "See details here". Is there a more efficient way to achieve this function ...

Sequence of actions for dynamically inserted elements in combination with the Masked-Input plugin

My web app functions well in the non-ajax version as the events are added in the desired order and all events are associated with the cell-phone element in question. However, in my ajax app, the events are added in a 'different' manner because t ...

Single-use condition for checkbox functionality in JavaScript

As a newcomer to javascript programming, I am struggling to make a checkbox display two radio buttons only when it is unchecked, even after researching solutions. Here is my current code snippet: <span><strong>Not Available</strong></ ...

Adjusting text to begin after a variable by two spaces (equivalent to 5 pixels)

When displaying the echoed text below, I noticed that "DURING" sometimes overlaps with the variable $submittor when there are not enough &nbsp;s. On the other hand, if too many &nbsp;s are added, there ends up being excessive space between $submitt ...

Achieving a Customized Header and Footer in Bootstrap 4 Alongside Immersive Google Maps Display with Full Screen Height

I'm facing some challenges while developing a webpage with Bootstrap 4.1. I am working on incorporating a header, Google map that fills the entire content area, and a footer below the map. ------------------------------------------------------------- ...

Troubleshooting is the downfall of the Apppool

My application was running smoothly until yesterday. Now, whenever I try to run it using F5, I encounter an error message saying "Unable to start ASP.NET Debugging." It seems that every time this error pops up, the app-pool gets stopped. Even after multip ...

How to Use CSS to Position an Image Within a Div?

.framework { position: absolute; } .headerimg { margin: 0 auto; } <body> <div class="framework"> <div class="header"> <div class="headerimg"> <img src="Header.jpg"> ...

Unable to align image using iframe in middle position

I am currently facing an issue with aligning a dynamically populated form within an iframe to the center of the webpage. Despite trying to use padding-left:13% to center the form, I encountered a problem with the form displaying a scroll bar and empty spac ...

How can jQuery's .append() method be used to replace the text in a <textarea> with a random number?

Simple Explanation: I want to add random numbers to an existing element on the page without affecting it. Every time the page loads, a new random number should be added. The initial problem: While I can successfully append text within an element, I am str ...

Executing the edit.js.erb file in Rails 5

I am facing an issue where I am trying to automate a click on a link on my webpage right after it finishes loading. The page in question is on the edit path "/assignments/(id)/edit". However, despite my efforts, nothing happens - no console message, no cl ...

Button activation or deactivation based on the join status being either true or false

My goal is to have the button "Button_Join" become active when the status of joining in my table is true and inactive when it's false. Code: <asp:Repeater ID="RepeaterTeam" runat="server"> <ItemTemplate> <tr> <td> ...

Leveraging MVC 4 for Web Service Development

I am currently in the process of developing a web service using MVC 4 and HTML for the client interface. One issue I am facing is that my HTML file is located outside of the application, while my MVC service is running on Visual Studio IIS Express. I' ...

Develop a CSS layout for the specified design

Aiming to achieve a unique layout using dynamic html strings. The challenge arises when transitioning to the second page as the layout does not adjust upward and images cannot be added to the first page. Attempting to implement the following sample code ...

Is the transmission of " " or " " determined by the individual browser, or is it consistent across all browsers?

This issue has been on my mind for ages... every time I build a website with a textarea that allows multiple lines (like a "About Me" section for a user's profile) I find myself constantly writing this cautious code: // Sample C# code... bio = bio.Re ...

Handling errors in image echo in PHP

My attempts to manage 404 images retrieved from omdbapi.com have failed due to issues in my code. I am currently looping through an array to create a movie list. echo '<a href="'.$oIMDB->getUrl().'" target="_new"><img class="i ...