Giter Club home page Giter Club logo

autocomplete's Introduction

Выпадающий список с поиском

Домашнее задание к занятию 2.2 «Работа с HTML-формами».

Описание

Необходимо дописать удобное управление списком интересов для профиля пользователя.

Demo

Исходные данные

  1. Основная HTML-разметка
  2. Базовая CSS-разметка
  3. Часть написанного кода JS

Реализация представляет собой HTML-обёртку над тегом select:

В существующей реализации необходимо доработать метод getMatches

  getMatches( text ) {
    /*
      TODO: этот метод нужно дописать
      text - фраза, которую вводят в поле поиска
      Метод должен вернуть массив.

      Он формируется на основе списка опций select-элемента (this.input)
      Подходящие опции - те, чей текст содержит то, что есть в аргументе text
      Необходимо вернуть массив объектов со свойствами:
      {
        text: 'Содержимое <option>',
        value: 'Содержимое атрибута value'
      }
    */
    return [
      {
        text: 'Чубакка',
        value: '1'
      }
    ];
  }

В экземпляре класса Autocomplete имеется свойство input, которое указывет на тег select. Его необходимо использовать для обхода по всем опциям списка.

Подсказки (спойлеры)

Используемые темы
  1. Свойство options тега select
  2. Метод includes
Советы

Для получения всех опций тега select достаточно обратиться к this.input.options

Процесс реализации

  1. Допишите метод getMatches
  2. Получайте удовольствие :)

Решение задач

  1. Перейти в папку задания. cd ./html-forms/autocomplete.
  2. Открыть файл task.js в вашем редакторе кода и выполнить задание.
  3. Открыть файл task.html в вашем браузере и убедиться в правильности выводимых результатов.
  4. Добавить файл task.js в индекс git с помощью команды git add %file-path%, где %file-path% - путь до целевого файла. git add task.js.
  5. Сделать коммит используя команду git commit -m '%comment%', где %comment% - это произвольный комментарий к вашему коммиту. git commit -m 'first commit autocomplete'.
  6. Опубликовать код в репозиторий homeworks с помощью команды git push -u origin master.
  7. Прислать ссылку на репозиторий через личный кабинет на сайте Нетологии.

Никаких файлов прикреплять не нужно.

Все задачи обязательны к выполнению для получения зачета. Присылать на проверку можно каждую задачу по отдельности или все задачи вместе. Во время проверки по частям ваша домашняя работа будет со статусом "На доработке".

Любые вопросы по решению задач задавайте в чате учебной группы.

autocomplete's People

Contributors

go5710264 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.