Tomickigrzegorz Script Finder Predictive Search

Hey there, I recently tried out the autocomplete script created by tomickigrzegorz.

Check it out here!

It's been working smoothly for me, but I'm facing an issue with external link tags like https//google.com not functioning properly.

Here is a snippet of my code for a more complex test and example:


<div class="info">
              <h4><a  href='https://breakingbadapi.com/' target='_blank'>${el.name}</a></h4>
              <div><b>nickname:</b> - <a class='link-to-api' href="https//google.com" target="_self">${el.nickname}</a></div>
              <div><b>birthday:</b> - ${el.birthday}</div>
              <div><b>status:</b> - ${el.status}</div>
</div>

While I can still copy the link from the search result, clicking on them doesn't seem to work properly...

I've checked through the scripts and CSS files, but couldn't figure out why the links are being blocked.

If anyone has a solution for this issue, I'd greatly appreciate it!

Thank you. Merci bien.

Answer №1

One interesting feature is the presence of a preventDefault() function within the code, which effectively disables links

To work around this, you can utilize the onclick attribute instead

<a  href='' onclick="window.open('https://breakingbadapi.com/', '_blank')">${el.name}</a>

Given that this library seems geared towards autocomplete functionality for input fields, it may be worth exploring other options specifically built for card searching.

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

Express middleware for serving static files using express.static() is not properly handling routing and is throwing an error stating that next()

During the development and testing phase on my local machine, everything was working as expected. However, once deployed to our UAT environment using Docker, I encountered some issues that are puzzling me: next() is not a function Another problem I'm ...

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

Using the && operator for conditional rendering in a React return statement

How should I format my return statement in a class component when using the && operator in the condition like this: if (x === null && y === null) If the condition is met, display this HTML: <div className="col-12"> <SomeComponent /> < ...

retrieving the file directory from a folder with the help of ajax

I am having trouble retrieving a list of files from a specific URL that lists files inside a folder: https://i.sstatic.net/VH22b.png In order to obtain this list of files using JavaScript, I have written the following code: $.ajax({ url: &ap ...

Exploring AngularJS's Unique Features: Isolated Scope and Controller Connection

Currently, I am diving into Angular and endeavoring to develop a Phone Message Log application utilizing directives. The concept is simple - the user inputs a message, clicks a button, and it gets displayed in a "Message" log below. The challenge I'm ...

Discover the secret to loading multiple Google charts simultaneously, despite the limitation that Google charts typically only allow one package to load at a time

I currently have a pie chart displaying smoothly on my webpage, but now I am looking to add a treemap as well. The code snippet for the treemap includes the package {'packages':['treemap']}. It has been stated that only one call should ...

Bookmarklet does not successfully inject jQuery on a specific webpage

Trying to utilize a certain bookmarklet: javascript:void((function(doc){if(typeof jQuery=='undefined'){var script_jQuery=document.createElement('script');script_jQuery.setAttribute('src','https://code.jquery.com/jquery ...

comparing caching with jquery deferred against promise

Currently, I have implemented code using jQuery Deferred and ajax to fetch data from a remote API, store it in localStorage, and retrieve it from there. However, this code has a bug where it doesn't display the data properly the first time it runs (re ...

The new and improved Vue 3 computed feature in the Composition API

The temporary object appears as: tmp : { k1: { k2 : { k3 : [abc, def] } } To access k3 in the setup, it should be: tmp.value.k1.k2.k3[0 or 1]. I am looking to change its name to something like - k3_arr = tmp.value.k1.k2.k3; Within my Vue single componen ...

Using React.js - Discover the best way to incorporate a function within a child component to unmount a different child component from the same parent, and then mount a new component in its place

Consider this scenario: import React, { Component } from 'react'; import BodyContent from './BodyContent'; import BottomOne from './BottomOne'; import BottomTwo from './BottomTwo'; class App extends Component { re ...

Guide to setting up index.js with ApiProvider in the Redux Toolkit (RTK)

Have you ever considered customizing the index.js file in the root directory based on ChatGPT's recommendations? I'm not entirely convinced that it's the most common practice. What are your thoughts on this approach? // Here is an example of ...

Patience is key when awaiting the completion of several promises

I am currently utilizing the SQLStorage feature provided by the Ionic platform. The remove function within this tool returns a promise. Within my code, I have a need to remove multiple values and then execute some additional code once all removals are comp ...

The value 'true' was returned for an attribute 'exact' that is not of boolean type

How can I resolve this warning? Sample Code const Main = (header, navigation) => { return ( <> <div> {navigation !== false && <Navigation />} </div> </> ) } I attempted this soluti ...

Troubles arising from React component integration with Gatsby JS

As I dive into creating a stunning portfolio website with Gatsby js, I encountered an issue while trying to integrate the card component from the gatsby-plugin-material-ui package. The card resides in a separate file within my components directory and is e ...

How to locate the data-id of the next element in a jQuery list

Is it possible to retrieve the data-id of the following list element when clicking a button while on the current active list item? <div class="nbrs"> <ul> <li id="item1" data-id="1" class="active ...

iPhone height is not correct

One issue I faced was when trying to view a webpage in landscape mode on iPhones (specifically testing on model SE, but it appears that many people are experiencing the same problem with other iPhone models). I have created a simple example below, consist ...

What is the process of transferring Polish characters from a JOSON file to a JSON file?

I attempted the following code snippet: # -*- coding: utf-8 -*- with open("File1", "w") as outfile: json.dump( {"Tytuł":"tą"}, outfile, indent = True, encoding="utf-8") As a result, I get: { "Tytu\u0142": "t\u0105" } However, what I wou ...

Disregard Cloudflare's Automatic RocketLoader feature for certain JavaScript scripts

After extensive research and failed attempts, I am seeking help to disable Cloudflare Rocketloader for a specific JavaScript file on my WordPress website. Specifically, I need to exclude the Automatic Rocket Loader for a particular .js file. I attempted t ...

Searching using wildcards in a single text field in MySQL using PHP on a web page created with

Recently, I acquired some PHP scripts from a coworker that includes a search functionality for the "Notes" text field in a database named "Sheep". The search is conducted through a text box: https://i.sstatic.net/NbwMF.png Here is the code for the search ...

When it comes to utilizing jQuery for the mobile view, how many jQuery libraries are recommended for optimal performance?

I'm currently constructing a website using ROR, and for the mobile view, I've implemented the mobile_fu gem. The designer provided me with a design for the mobile view that includes various jQuery sliders, players, image sliders, drop-down menus ...