Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by ryan roberts
ryan roberts
Courses Plus Student 7,601 Points

Having trouble with making a content filter using javascript

what would be the best way to compare user input against an array of names and emails, returning all matches ( including partial matches e.g. search for "jo" would return "joel", "joseph", "john" etc.).

i have completed the Pagination and Content filter project as far as i could, but i have been stuck on this for a while now and will attach my current search function below. Any help or Advice would be of great use to me, Thankyou.

//add search function allowing user to search student list
//store student names and student emails in an array
var names = document.getElementsByClassName('searchField');
var emails = $('email');

//when search button is clicked,
function searchStudents(){
  //retrieve input value
  var input = $('#searchInput').val();
  //cycle through names array
  for (var i = 0; i < studentNo; i++){
    //compare names values to input** ISSUE ** will not retrieve partial matches
    if(input == names[i].innerText){;
      //display any matching names
      $(studentList[i]).show();
    } else {
      //hide other names
      $(studentList[i]).hide();
    }
  }
}
//add click event to searchbutton
$( "#searchButton" ).on( "click", searchStudents);
miikis
miikis
44,957 Points

Could you post all of your code?

ryan roberts
ryan roberts
Courses Plus Student 7,601 Points

here is all of my code on Github, https://github.com/RyanTRoberts/Pagination-search-filter

Thankyou for taking a look.

1 Answer

miikis
miikis
44,957 Points

Right. So. First, a disclaimer. You will never, ever have the need to reenact — in real life — the things that are transpiring in your code above! Invariably, your data-model will not need to be scraped from the DOM; pagination will not be implemented client-side; filter/search functionality will involve AJAX requests. That being said, below is one way you could implement this contrived, hyperbole of an example. Feel free to ask for clarification, if you need it ;)

// Get relevant references
const $page = document.querySelector('.page')
const $pageHeader = $page.querySelector('.page-header')
const $studentsList = document.getElementById('student-list')

// Helper functions
function show(el) {
    el.style.display = 'block'
}

function hide(el) {
    el.style.display = 'none'
}

// Displays all student list-items between minInclusiveInt and maxInclusiveInt
// Hides all the rest
function filterStudentsHTML(minInclusiveInt, maxInclusiveInt) {
    const $studentsListItems = $studentsList.children

    minInclusiveInt = minInclusiveInt || 0
    maxInclusiveInt = maxInclusiveInt || $studentsListItems.length

    for (var i = 0; i < $studentsListItems.length; i++) {
        const $li = $studentsListItems.item(i)
        if (i < minInclusiveInt) {
            hide($li)
        } else if (i >= maxInclusiveInt) {
            hide($li)
        } else {
            show($li)
        }
    }
}

function onPaginationItemClick(event) {
    event.preventDefault()

    const pageNumber = parseInt(event.target.textContent)
    filterStudentsHTML((pageNumber * 10) - 10, pageNumber * 10)
}

function onSearchSubmit(event) {
    const $input = document.getElementById('searchInput')
    const query = $input.value

    $input.value = ''

    if (query === '') {
        return false
    }

    $studentsList.children.forEach(function ($li) {
        const name = $li.querySelector('h3').textContent

        if (name.includes(query)) {
            show($li)
        } else {
            hide($li)
        }
    })
}

// This is just so that we can treat HTMLCollections like really-real Arrays
HTMLCollection.prototype.forEach = Array.prototype.forEach

function buildSearchHTML() {
    const $container = document.createElement('div')
    const $input = document.createElement('input')
    const $btn = document.createElement('button')

    $container.className = 'student-search'
    $input.id = 'searchInput'
    $input.setAttribute('placeholder', 'Search for students...')
    $btn.id = 'searchButton'
    $btn.textContent = 'Search'

    $btn.addEventListener('click', onSearchSubmit, false)

    $container.appendChild($input)
    $container.appendChild($btn)

    return $container
}

function buildPaginationHTML(pageCount) {
    const $container = document.createElement('div')
    const $ul = document.createElement('ul')

    for (var i = 0; i < pageCount; i++) {
        const $li = document.createElement('li')
        const $a = document.createElement('a')

        $a.className = 'pageNumbers'
        $a.href = '#'
        $a.textContent = i + 1

        $li.appendChild($a)
        $ul.appendChild($li)

        $li.addEventListener('click', onPaginationItemClick, false)
    }

    $container.className = 'pagination'

    $container.appendChild($ul)
    return $container
}

// Add the search-bar HTML
$pageHeader.appendChild(buildSearchHTML());

// Add the pagination HTML
$page.appendChild(buildPaginationHTML(5));

// Hide all student list-items except the first 10
for (var i = 10; i < $studentsList.children.length; i++) {
    hide($studentsList.children.item(i))
}
ryan roberts
ryan roberts
Courses Plus Student 7,601 Points

Thank you so much for the help, it was exactly what i needed.