Utilize AJAX or another advanced technology to refine a pre-existing list

Question

Utilize AJAX or another advanced technology to refine a pre-existing list

I am trying to implement a searchable list of buttons on my website, but I haven't been able to find a solution that fits exactly what I have in mind. Currently, I have a list of buttons coded as inputs and I want to add a search field that will filter the buttons as the user types.

For example, if I have 30 buttons representing popular websites and a user starts typing "G", only buttons with names starting with "G" should be displayed, and so on for subsequent letters entered by the user.

I have considered manually coding a solution using IDs and CSS to show/hide elements, but I feel this approach may not be very efficient or maintainable in the long run.

While AJAX seems like a good option for dynamic filtering, I am open to exploring other JavaScript solutions that might work better in this scenario.

javascript html css ajax

Answer 1

Answer №1

Creating dynamic links in JavaScript:

var links=[
  {
       name:"google",
       url:"http://google.com"
   },
   {nextone}
   ];

Generate the links in HTML using JavaScript:

window.onload=function(){
    var container=document.body;//change this to your needs
  for(i=0;i<links.length;i++){
     var link=links[i];
     link.html=document.createElement("a");
     link.html.innerHTML=link.name;
     link.html.src=link.url;
     container.appendChild(link.html);
 }
 };

If a search term is inputted, hide the unmatched links:

function filter(string){
 //loop through links
 for(i=0;i<links.length;i++){
    var link=links[i];
    //if string doesn't match name
    if(!link.name.split(string)[1]){
       link.html.style.display="none";
     }else{
       link.html.style.display="block";
     }
  }
  }

Applying the filter function:

filter("goo");

You could bind the filter to an input element:

yourinput.addEventListener("onchange",function(){filter(this.value)},false);

Answer 2

Creating dynamic links in JavaScript:

var links=[
  {
       name:"google",
       url:"http://google.com"
   },
   {nextone}
   ];

Generate the links in HTML using JavaScript:

window.onload=function(){
    var container=document.body;//change this to your needs
  for(i=0;i<links.length;i++){
     var link=links[i];
     link.html=document.createElement("a");
     link.html.innerHTML=link.name;
     link.html.src=link.url;
     container.appendChild(link.html);
 }
 };

If a search term is inputted, hide the unmatched links:

function filter(string){
 //loop through links
 for(i=0;i<links.length;i++){
    var link=links[i];
    //if string doesn't match name
    if(!link.name.split(string)[1]){
       link.html.style.display="none";
     }else{
       link.html.style.display="block";
     }
  }
  }

Applying the filter function:

filter("goo");

You could bind the filter to an input element:

yourinput.addEventListener("onchange",function(){filter(this.value)},false);

Utilize AJAX or another advanced technology to refine a pre-existing list

Answer №1

Similar questions

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

Using jQuery to asynchronously load images with lazy loading and AJAX

Show the logo next to the user's login information

Issue #98123 encountered during execution of `npm run develop` command, related to WEBPACK

losing track of the requested parameters while working asynchronously with Firestore documents

Emphasize x-axis heading in a Highcharts graph

Troubleshooting Rails 5 and AJAX modal login issues

The error message at line 757 in utils.ts states that the [div] element is not recognized as a valid <Route> component

I am trying to use jQuery to dynamically change classes based on certain conditions. However, I am encountering an issue where the class of my 'home' link remains unchanged even after clicking on another link. How

What's the advantage in using 2 functions instead of just utilizing one?

What is the process for creating a clickable file upload in Angular?

What could be causing my radio button list to stop functioning correctly? (After applying CSS)

Can we switch the country name to the database name in Jvector?

Chic and perfectly aligned stripe button design

Selecting a main node using the key value

Avoid Updating State After Adding Row in material-table

Problem with word-spacing in Safari versions 6.1 and 7.0 when using text-align:center

How should one correctly trigger an event in Google scripts?

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

What is the process for accessing npm packages through a website?