Advertisement
Guest User

Untitled

a guest
Mar 27th, 2017
61
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.     return function(selector, initialSuggestions) {
  3.         var targetElement = document.querySelector(selector);
  4.  
  5.         var uniqueSuggestions = [];
  6.  
  7.         var suggestionsList = targetElement.getElementsByClassName('suggestions-list')[0],
  8.             input = targetElement.getElementsByClassName('tb-pattern')[0],
  9.             addButton = targetElement.getElementsByClassName('btn-add')[0];
  10.  
  11.         var liTemplate = document.createElement('li');
  12.         liTemplate.className = 'suggestion';
  13.  
  14.         var anchorTagTemplate = document.createElement('a');
  15.         anchorTagTemplate.className = 'suggestion-link';
  16.  
  17.         if (initialSuggestions) {
  18.             initialSuggestions.forEach(function(suggestionName) {
  19.                 AddSuggestion(suggestionName);
  20.             });
  21.         }
  22.  
  23.         input.addEventListener('input', function(ev) {
  24.             var inputValue = input.value;
  25.  
  26.             var links = [].slice.apply(suggestionsList.getElementsByClassName('suggestion-link'));
  27.  
  28.             links.forEach(function(link) {
  29.                 if (inputValue === '') {
  30.                     link.parentElement.style.display = 'none';
  31.                     return;
  32.                 }
  33.  
  34.                 if (link.innerHTML.toLowerCase().includes(inputValue.toLowerCase())) {
  35.                     link.parentElement.style.display = '';
  36.                 } else {
  37.                     link.parentElement.style.display = 'none';
  38.                 }
  39.             });
  40.         });
  41.  
  42.         addButton.addEventListener('click', function() {
  43.             var inputValue = input.value;
  44.  
  45.             if (inputValue === '') {
  46.                 return;
  47.             }
  48.  
  49.             var isAdded = AddSuggestion(inputValue);
  50.             if (isAdded) {
  51.                 input.value = '';
  52.             }
  53.         });
  54.  
  55.         suggestionsList.addEventListener('click', function(ev) {
  56.             var inputValueToSet = '';
  57.  
  58.             var clickedElement = ev.target;
  59.  
  60.             if (clickedElement.tagName === 'LI') {
  61.                 inputValueToSet = clickedElement.firstElementChild.innerHTML;
  62.             } else if (clickedElement.tagName === 'A') {
  63.                 inputValueToSet = clickedElement.innerHTML;
  64.             }
  65.  
  66.             input.value = inputValueToSet;
  67.         });
  68.  
  69.         function AddSuggestion(suggestionName) {
  70.             if (uniqueSuggestions.indexOf(suggestionName.toLowerCase()) >= 0) {
  71.                 return false;
  72.             }
  73.  
  74.             uniqueSuggestions.push(suggestionName.toLowerCase());
  75.  
  76.             var liToAdd = liTemplate.cloneNode(true);
  77.             liToAdd.style.display = 'none';
  78.  
  79.             var linkToAdd = anchorTagTemplate.cloneNode(true);
  80.             linkToAdd.innerHTML = suggestionName;
  81.  
  82.             liToAdd.appendChild(linkToAdd);
  83.  
  84.             suggestionsList.appendChild(liToAdd);
  85.  
  86.             return true;
  87.         }
  88.     };
  89. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement