1+ var selectedGuests = [ ] ;
2+ function guestIsAlreadyAdded ( array , guestObject ) {
3+ for ( var i = 0 ; i < array . length ; i ++ ) {
4+ if ( array [ i ] . name == guestObject . name && array [ i ] . id == guestObject . id ) {
5+ return true ;
6+ }
7+ }
8+ return false ;
9+ }
10+ function autocomplete ( inp , arr ) {
11+ /*the autocomplete function takes two arguments,
12+ the text field element and an array of possible autocompleted values:*/
13+ var currentFocus ;
14+ /*execute a function when someone writes in the text field:*/
15+ inp . addEventListener ( "input" , function ( e ) {
16+ var a , b , i , val = this . value ;
17+ /*close any already open lists of autocompleted values*/
18+ closeAllLists ( ) ;
19+ if ( ! val ) { return false ; }
20+ currentFocus = - 1 ;
21+ /*create a DIV element that will contain the items (values):*/
22+ a = document . createElement ( "DIV" ) ;
23+ a . setAttribute ( "id" , this . id + "autocomplete-list" ) ;
24+ a . setAttribute ( "class" , "autocomplete-items" ) ;
25+ /*append the DIV element as a child of the autocomplete container:*/
26+ this . parentNode . appendChild ( a ) ;
27+ /*for each item in the array...*/
28+ for ( i = 0 ; i < arr . length ; i ++ ) {
29+ /*check if the item starts with the same letters as the text field value:*/
30+ if ( arr [ i ] . name . substr ( 0 , val . length ) . toUpperCase ( ) == val . toUpperCase ( ) ) {
31+ /*create a DIV element for each matching element:*/
32+ b = document . createElement ( "DIV" ) ;
33+ /*make the matching letters bold:*/
34+ b . innerHTML = "<strong>" + arr [ i ] . name . substr ( 0 , val . length ) + "</strong>" ;
35+ b . innerHTML += arr [ i ] . name . substr ( val . length ) ;
36+ /*insert a input field that will hold the current array item's value:*/
37+ b . innerHTML += "<input type='hidden' id='name' value='" + arr [ i ] . name + "'>" ;
38+ b . innerHTML += "<input type='hidden' id='id' value='" + arr [ i ] . id + "'>" ;
39+ /*execute a function when someone clicks on the item value (DIV element):*/
40+ b . addEventListener ( "click" , function ( e ) {
41+ elementoLi = document . createElement ( "LI" ) ;
42+ var guestName = this . getElementsByTagName ( "input" ) [ 0 ] . value ;
43+ var guestId = this . getElementsByTagName ( "input" ) [ 1 ] . value ;
44+ elementoLi . setAttribute ( "class" , "guest_" + guestId ) ;
45+ // push values to array of selected guests
46+ if ( ! guestIsAlreadyAdded ( selectedGuests , { id : guestId , name : guestName } ) ) {
47+ selectedGuests . push ( { id : guestId , name : guestName } ) ;
48+
49+ elementoLi . innerHTML =
50+ "<div>" +
51+ "<img src=\"http://www.skywardimaging.com/wp-content/uploads/2015/11/default-user-image.png\" height=\"20\" width=\"20\" style=\"margin:5%\"></img>" +
52+ guestName +
53+ "<a class=\"removeItem\"> x</a>"
54+ "</div>" ;
55+ var guestList = document . getElementById ( "invitedGuests" ) ;
56+ guestList . appendChild ( elementoLi ) ;
57+ }
58+ /*close the list of autocompleted values,
59+ (or any other open lists of autocompleted values:*/
60+ closeAllLists ( ) ;
61+ } ) ;
62+ a . appendChild ( b ) ;
63+ }
64+ }
65+
66+ for ( i = 0 ; i < arr . length ; i ++ ) {
67+ /*check if the item starts with the same letters as the text field value:*/
68+ if ( arr [ i ] . name . toUpperCase ( ) . includes ( val . toUpperCase ( ) ) && arr [ i ] . name . substr ( 0 , val . length ) . toUpperCase ( ) != val . toUpperCase ( ) ) {
69+ /*create a DIV element for each matching element:*/
70+ b = document . createElement ( "DIV" ) ;
71+
72+ var startingPosition = arr [ i ] . name . toUpperCase ( ) . indexOf ( val . toUpperCase ( ) ) ;
73+ /*make the matching letters bold:*/
74+ b . innerHTML = arr [ i ] . name . substr ( 0 , startingPosition - 1 ) ;
75+ b . innerHTML += "<strong>" + arr [ i ] . name . substr ( startingPosition , val . length ) + "</strong>" ;
76+ b . innerHTML += arr [ i ] . name . substr ( val . length ) ;
77+
78+ /*insert a input field that will hold the current array item's value:*/
79+ b . innerHTML += "<input type='hidden' id='name' value='" + arr [ i ] . name + "'>" ;
80+ b . innerHTML += "<input type='hidden' id='id' value='" + arr [ i ] . id + "'>" ;
81+ /*execute a function when someone clicks on the item value (DIV element):*/
82+ b . addEventListener ( "click" , function ( e ) {
83+ elementoLi = document . createElement ( "LI" ) ;
84+ var guestName = this . getElementsByTagName ( "input" ) [ 0 ] . value ;
85+ var guestId = this . getElementsByTagName ( "input" ) [ 1 ] . value ;
86+ elementoLi . setAttribute ( "class" , "guest_" + guestId ) ;
87+ // push values to array of selected guests
88+ if ( ! guestIsAlreadyAdded ( selectedGuests , { id : guestId , name : guestName } ) ) {
89+ selectedGuests . push ( { id : guestId , name : guestName } ) ;
90+
91+ elementoLi . innerHTML =
92+ "<div>" +
93+ "<img src=\"http://www.skywardimaging.com/wp-content/uploads/2015/11/default-user-image.png\" height=\"20\" width=\"20\" style=\"margin:5%\"></img>" +
94+ guestName +
95+ "<a class=\"removeItem\"> x</a>"
96+ "</div>" ;
97+ var guestList = document . getElementById ( "invitedGuests" ) ;
98+ guestList . appendChild ( elementoLi ) ;
99+ }
100+ /*close the list of autocompleted values,
101+ (or any other open lists of autocompleted values:*/
102+ closeAllLists ( ) ;
103+ } ) ;
104+ a . appendChild ( b ) ;
105+ }
106+ }
107+ } ) ;
108+ /*execute a function presses a key on the keyboard:*/
109+ inp . addEventListener ( "keydown" , function ( e ) {
110+ var x = document . getElementById ( this . id + "autocomplete-list" ) ;
111+ if ( x ) {
112+ x = x . getElementsByTagName ( "div" ) ;
113+ }
114+ if ( e . keyCode == 40 ) {
115+ /*If the arrow DOWN key is pressed,
116+ increase the currentFocus variable:*/
117+ currentFocus ++ ;
118+ /*and and make the current item more visible:*/
119+ addActive ( x ) ;
120+ } else if ( e . keyCode == 38 ) { //up
121+ /*If the arrow UP key is pressed,
122+ decrease the currentFocus variable:*/
123+ currentFocus -- ;
124+ /*and and make the current item more visible:*/
125+ addActive ( x ) ;
126+ } else if ( e . keyCode == 13 ) {
127+ /*If the ENTER key is pressed, prevent the form from being submitted,*/
128+ e . preventDefault ( ) ;
129+ if ( currentFocus > - 1 ) {
130+ /*and simulate a click on the "active" item:*/
131+ if ( x ) {
132+ x [ currentFocus ] . click ( ) ;
133+ }
134+ }
135+ }
136+ } ) ;
137+
138+ function addActive ( x ) {
139+ /*a function to classify an item as "active":*/
140+ if ( ! x ) return false ;
141+ /*start by removing the "active" class on all items:*/
142+ removeActive ( x ) ;
143+ if ( currentFocus >= x . length ) currentFocus = 0 ;
144+ if ( currentFocus < 0 ) currentFocus = ( x . length - 1 ) ;
145+ /*add class "autocomplete-active":*/
146+ x [ currentFocus ] . classList . add ( "autocomplete-active" ) ;
147+ }
148+ function removeActive ( x ) {
149+ /*a function to remove the "active" class from all autocomplete items:*/
150+ for ( var i = 0 ; i < x . length ; i ++ ) {
151+ x [ i ] . classList . remove ( "autocomplete-active" ) ;
152+ }
153+ }
154+ function closeAllLists ( elmnt ) {
155+ /*close all autocomplete lists in the document,
156+ except the one passed as an argument:*/
157+ var x = document . getElementsByClassName ( "autocomplete-items" ) ;
158+ for ( var i = 0 ; i < x . length ; i ++ ) {
159+ if ( elmnt != x [ i ] && elmnt != inp ) {
160+ x [ i ] . parentNode . removeChild ( x [ i ] ) ;
161+ }
162+ }
163+ }
164+
165+ function removeItem ( id ) {
166+ var positionToRemove = - 1 ;
167+ for ( var i = 0 ; i < selectedGuests . length ; i ++ ) {
168+ if ( selectedGuests [ i ] . id == id ) {
169+ positionToRemove = i ;
170+ break ;
171+ }
172+ }
173+ if ( positionToRemove >= 0 ) {
174+ selectedGuests . splice ( positionToRemove , 1 ) ;
175+ }
176+ }
177+ /*execute a function when someone clicks in the document:*/
178+ document . addEventListener ( "click" , function ( e ) {
179+ closeAllLists ( e . target ) ;
180+ if ( e . target && e . target . className == 'removeItem' ) {
181+ var itemClassName = e . target . parentNode . parentNode . className ;
182+ console . log ( itemClassName ) ;
183+ //remove html object
184+ $ ( '.' + itemClassName ) . remove ( ) ;
185+ //remove from array object
186+ removeItem ( itemClassName . split ( '_' ) [ 1 ] ) ;
187+ }
188+ } ) ;
189+ }
0 commit comments