Tips for displaying autocomplete suggestions as clickable links?

I am new to using Ajax and trying to figure out how to display autocomplete results as clickable links. I have managed to list the related results, but I am struggling to add the links. I believe the links need to be added within the script as an HTML tag. Can someone guide me on how to incorporate HTML links?

Below is my current script:

<script type="text/javascript">
    $(document).ready(function () {
        SearchText();
    });
    function SearchText() {
        $(".auto").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Default.aspx/GetAutoCompleteData",
                    data: "{'question':'" + document.getElementById('txtQuestion').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert("Error Occurred");
                    }
                });
            }
        });
    }
</script>

Here is the method that interacts with the database and retrieves related results:

[WebMethod]
public static List<string> GetAutoCompleteData(string question)
{
    List<string> result = new List<string>();
    using (SqlConnection conn = new SqlConnection("Data Source=xxx;Initial Catalog=xxx;User ID=xxx;Password=xxx+"))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT Questions,Link FROM DigiQA WHERE Questions LIKE '%'+@quest+'%'", conn))
        {
            conn.Open();
            cmd.Parameters.AddWithValue("@quest", question);
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                result.Add(dr["Questions"].ToString());
            }
            return result;
        }
    }   
}

Answer №1

Consider attempting the following approach

done: function(result) {
    callback($jQuery.map(result, function(entry) {
        return {
           name: '<a href="yourlink">' + entry + '</a>'),
           data: entry
        }
    }))
}

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

Issues with Node.js and AJAX

I am having trouble with my ajax request to retrieve data from node.js. The interaction between the two seems off, but I can't pinpoint where the issue lies. Below is the snippet of my ajax get request: $.get('/notificationsNumber', ...

Is there a feature in Angular similar to Vue.js's "computed property" functionality?

After mastering Vue.js, I recently dove into Angular 4 for a new project. I've found that most things in Angular are quite similar to Vue, with the notable exception of "Computed Property". In Vue, I could easily create a computed property that would ...

Switching the position of a Button in Semantic UI React: Moving it from the Left to the

I need assistance with adjusting the position of a Semantic UI React Button. By default, the button is displayed on the left side, but I would like it to be on the right side instead. Can someone please provide guidance on how I can move the Semantic butto ...

JS script for clicking various icons on a webpage that trigger the opening of new tabs

I am working on a webpage where I have 9 icons with the same class. I am trying to write JavaScript code that will automatically open all 9 icons when the webpage loads. I tried using the code below, but it only clicks on the first icon and stops. let ...

What exactly are Node.js core files?

I recently set up my Node.js application directory and noticed a presence of several core.* files. I am curious about their purpose - can these files be safely removed? The setup involves installing Node.js alongside Apache using mod_proxy to host one of ...

Modifying an element's value according to user input: Step-by-step guide

Within my dropdown menu, there is a single option labeled "Others". Upon selecting this option, a textbox appears allowing me to input custom text. Is it possible to dynamically update the value of the <option value="Others">Others</option>, ...

Unique validation feature implemented in Parsley.js runs through validation loop twice

I've spent the entire afternoon trying to figure this out, but I just can't seem to debug it. The issue arises when I do a hard refresh of the page and my custom async validator runs twice, yet only sends one request to the server. window.Parsle ...

Problem with Snowpack's internal module import paths

While working on a project, I am using npx snowpack build --watch instead of the dev command because of a Flask backend. However, I am facing issues with internal imports, specifically modules importing dependencies like Bootstrap importing Popper. The pr ...

Leverage the data retrieved from an Ajax request to generate dynamic content

I'm currently working on a project that involves creating dynamic content using Ajax, php/Codeigniter, and Javascript. The process includes submitting a form from a view to a controller, fetching data, populating an array, and displaying charts based ...

Changing variables within anonymous functions in javascript can be done by using the parameters passed into

Hello everyone, I'm currently working on a new JavaScript project and I've encountered an issue. I need to figure out how to change variables in anonymous functions. Can anyone help me with this? updateName : function(){ var firstNa ...

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

Currently, I am working with an expandable Card component from Material-UI and using flex for aligning the components. However, when one card expands, it affects the positioning of the other components in the row: https://i.stack.imgur.com/vGxBU.png What ...

CakePHP and nested AJAX forms causing issues in Firefox 3.5

Is it feasible to create a nested ajax form in cakephp that functions properly in Firefox? $ajax->form(form1...) table row $ajax->form(childForm_rowId) $form->end(childForm_rowId) endrow end table $form->end I h ...

My React higher order component implementation is revealing the protected route momentarily

import { useRouter } from "next/router"; import { useEffect } from "react"; import axios from "axios"; export default (ChildComponent) => { const enhanceComponent = (props) => { const router = useRouter(); co ...

What is the best way to experiment with angular-ui-tinymce within a tabset using Plunker?

I am currently experimenting with angular-ui-tinymce by incorporating it into a Plunkr. Can anyone assist me in integrating the necessary files for angular-ui-tinymce into the Plunkr so that I can showcase its functionality? Currently, I have this Plunker ...

What are the steps for integrating DoctorJS with Emacs?

Is there a method to utilize DoctorJS (formerly known as jsctags) in order to create a TAGS file specifically for Emacs? I have been researching this topic and it appears that it typically defaults to the vi tags style, although I may be overlooking a str ...

What could be causing the modal to not appear when clicking on this div?

$(function() { $("#pagination a").trigger('click'); // When the page loads, trigger a click event $('body').on('click','div.well well-sm',function(){ var list = $(this); $('#myModal .modal-title').h ...

What is the best way to save Vue state in a cookie while transitioning between form steps in a Laravel application

Imagine a scenario where a user is filling out a multi-step form, and we want to ensure that their progress is saved in case they lose connection. This way, the user's data will not be lost between different form steps. In addition to saving each ste ...

Send the Children prop to the React Memo component

Currently, I am in the stage of enhancing a set of React SFC components by utilizing React.memo. The majority of these components have children and the project incorporates TypeScript. I had a notion that memo components do not support children when I en ...

Ways to execute a JavaScript function upon a button click instead of during the page load completion

I searched on Google but couldn't find the answer, so I'm asking here for help. In the attached screenshot located at the end, when the user clicks on the download button, some backend actions are performed such as file transfer. Once the proces ...

Creating a stylish gradient text color with Material-UI's <Typography /> component

Is there a way to apply a gradient font color to a <Typography /> component? I've attempted the following: const CustomColor = withStyles({ root: { fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", }, })(T ...