Drew Wilson is the creator of jQuery AutoSuggest, a powerful

Currently, I am in the process of implementing the AutoSuggest plugin by Dew Wilson to retrieve JSON data from the server and showcase the results on my user interface. The response returned looks something like this:

[{"id":1,"surname":"Surname","forename":"Forename",
"address":{"id":5,"houseNameOrNumber":"357","addressDetail":"",
"postCode":"HD3 4GR"},"gender":"F","age":56,"yearOfBirth":1953}]

My goal is to display the following details in the auto suggestion box:

Surname, Forename
357, HD3 4GR
F, 56, 1953

I would appreciate any assistance in using the plugin to exhibit the aforementioned information in the autosuggest box.

Based on the code snippet provided below that fetches the response from the server, it seems that additional modifications might be necessary for it to function correctly:

$("input[type=text]").autoSuggest("http://mysite.com/path/to/script", 
{minChars: 2, matchCase: true});

Thank you in advance for your help.

jqueryhtmlcss

Answer №1

To achieve the desired result, ensure you utilize the selectedItemProp and selectedValueProp options as outlined in the provided documentation.

UPDATE:

For customization based on multiple properties, make use of the formatList option. Here is a sample implementation:

$("input[type=text]").autoSuggest("http://example.com/api/data", 
    {minChars: 2, matchCase: true, 
     formatList: function(data, elem) {
        var new_elem = elem.html(data.lastName + ", " + data.firstName + "<br />" +  data.address.street + ", " + data.address.postalCode + "<br />" + data.gender + ", " + data.age + ", " + data.yearOfBirth);
        return new_elem;
}});

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

Looking for a solution to split barcode data across two text fields

I am looking to enhance my data input process by utilizing a barcode scanner in conjunction with JQuery. The barcode scanner I have reads both the serial number and model name of each product, but currently displays them together in one text field. Is ther ...

javascriptjquerycssajax

Passing a string array from View to Controller using Url.Action in MVC framework

I am facing an issue where I have a method that returns an array (string[]) and I am attempting to pass this array of strings into an Action. However, I am currently unable to pass my parameters as expected. Being new in MVC3, I would appreciate any insi ...

javascriptarraysasp.net-mvc-3jqueryurl-routing

What is the best method to conceal a child frame from inside the frame?

Apologies for my confusion, as I am new to utilizing jQuery and may be missing something fundamental. I am attempting to create a link that hides a frame, but I need to access the parent page from the child in order to hide it. Below is the code I have wr ...

jqueryparent-child

Angular2's customer filter pipe allows for easy sorting and filtering of

Check out the component view below: <h2>Topic listing</h2> <form id="filter"> <label>Filter topics by name:</label> <input type="text" [(ngModel)]="term"> </form> <ul id="topic-listing"> <li *ngFo ...

htmlformsangularangular-pipe

Gathering video links from various sections of a site

I am currently using Selenium for web scraping. My goal is to extract all the video URLs from 626 products spread across 25 pages. However, I am facing an issue where it only gives me the href link of the thumbnail image source instead of the actual vide ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Transfer the cropped image to the database through AJAX on the client side and PHP on the server side

I am attempting to upload an image to a Database using JavaScript on the client-side and PHP on the server-side. The first step is selecting an image from the gallery. After zooming and cropping the image, it should be passed to the database. The issue ...

javascriptphpjqueryajax

I am interested in implementing a feature that restricts a particular website from being accessed more than once every 24-hour period by

I'm looking to restrict user access to a webpage to once every 24 hours. Are there any solutions besides using cookies? I could use some guidance on how to implement this. Thank you in advance for your help. ...

phpsessioncookieshtml

Issue with the app not redirecting properly at launch

Upon starting the app, I'm attempting to redirect the page if the user is already logged in. if (!isLoggedIn()) { mainView.router.loadPage({ url: 'index.html', ignoreCache: true, reload: false }); } else { $('#txtUserName').html(l ...

jqueryhtmlcordovaphonegaphtml-framework-7

What is the process for adding tailwind CSS via npm?

Before, I was including Tailwind using a CDN. Now, I have installed it with npm and all three .css files are included, but the styles are not appearing in my HTML document. Here is the directory structure and a link to style.css The content of tailwind.c ...

cssnpmtailwind-css

Passing a parameter from AJAX to PHP

const studentNumber = $('#studno').val(); $(document).ready(function () { $('.go').click(function () { $('.inup').load('prochat.php', { studno: studentNumber }); }); }); I've ...

phpjqueryhtmlajax

Transmitted only JSON data instead of using multiform data with jQuery Ajax

When I use jQuery Ajax to send a JSON object, it ends up being interpreted as 'multiform' instead of pure JSON. How can I make sure my request is sent as a pure JSON object and not multiform? var demo = new Array("One", "Two", "Three"); $.ajax ...

javascriptjqueryajaxjson

Adding an image to a div and slowly revealing it:

I'm currently working on creating an image slider. When I click on a thumbnail above, I retrieve the source of that image and append it to the designated div to display as a larger image. While this functionality is working, I'd like to enhance i ...

jqueryhtmlcss

JS form submission problem

Seeking advice on developing a functional contact form using HTML, CSS, and JavaScript. All conditions currently validate properly, but encountering an issue with error messages persisting after re-entering the required fields. Additionally, looking to red ...

javascripthtmlcssfrontendbootstrap-5

Tips for Deleting the Background of a Jquery Mobile Dialog

I am having an issue where the dialog only takes up 10% of the page and I would like to make the background transparent so that the previous page remains visible. Here is the javascript code that calls the dialog: $.mobile.changePage('#popdiv', ...

jquerymobilejquery-mobiledialog

Troubleshooting problem with sorting dates in MVC jQuery datatable

I have successfully implemented a datatable in MVC3 using c#. Everything was working perfectly on my local development machine, including the sorting of DateTime columns. However, when I uploaded the code to the server and accessed the webpage, I encounte ...

jqueryasp.net-mvcsortingdatetimedatatables

Changing the existing while loop to work with mysqli

Hello everyone, I need assistance with updating my code. Currently, I have an autosuggest search field that uses mysql, but I want to switch to mysqli. Here is the relevant portion of my code: if (isset($_POST['search_term']) == true && ...

phpmysqlhtmlloopsmysqli

Is there a subsequent event that follows the data-rel attribute with the value of 'back'?

How can I determine the value of window.location.hash when a user navigates back using a button with data-rel='back'? Is there a specific event that triggers at this moment? ...

jqueryjquery-mobileback

jQuery button click event not registering

Confused by what should be a simple solution, I find myself struggling to figure it out at the moment. All I have is this button: <button id="logout" type="button">Logout</button> It's meant to trigger this jQuery code enclosed in script ...

javascriptjquery

What are the advantages of importing CSS files from JS source code with webpack, rather than building CSS in isolation as traditionally done?

If you're looking for information on how to load CSS with webpack, check out the documentation here: https://webpack.js.org/guides/asset-management/#loading-css1 The webpack documentation suggests importing CSS files from JavaScript code and using ex ...

csswebpack

Carousel-item height in Bootstrap 4.6

I am facing an issue with a component in Angular 14 using Bootstrap v4.6: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

cssangularbootstrap-4carousel