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

ReactJS sidebar navigation functionality

"Utilize Ajax to load PHP content and dynamically refresh a specific div

Is there a way to implement a function in Javascript or CSS where hovering over a button will cause a div to scroll either left or right

Which is the preferable option for creating a circular daily planner: canvas or SVG?

Ways to update a single column in an HTML table when there is a change

Reload Popup Box

Is it important to position elements based solely on the parent container?

Dynamic inheritance in Node.js based on the version being used

What is the best way to convert items from a foreach loop into a JSON string using the json_encode() function in PHP?

Using axios to render data in a view template

I'm having trouble pinpointing the issue in my code

Unable to achieve separation of borders within dash_table.DataTable styling using CSS by setting border-collapse: separate; considering using border-spacing instead

Ways to assign a default background shade to a webpage with a transparent background

I am attempting to rebuild Vuex's Getting Started example by utilizing multiple components, yet I am struggling to understand how to call root methods from within these components

Navigating Error: net::ERR_CONNECTION while utilizing Puppeteer

Error Notification in React Bootstrap - Stay Informed!

Ugly consequences arise as Gulp stumbles upon uncharted territory during the uglify

Find similarities between 2 observable arrays and store them in a new array using knockout data binding

Text centered on hover for figure caption

Why is AJAX returning false and I'm unable to figure out the reason?