Hoi,
Ik probeer een autocomplete functie te maken voor mijn tekstveld, zodat bij het intypen van de eerste paar letters mogelijkheden worden getoond. Deze data wordt ingeladen uit een database.
Deze functie heb ik op de volgende manier werkend gekregen:
En dat dit in de html gezet:
Nu wil ik ook een optie maken dat als ik op een button druk, de informatie uit het textveld wordt weergegeven in het scherm. Dit heb ik op de volgende manier werkend gekregen:
Deze functie werkt verder wel ok, dat is het probleem niet. Mijn probleem is dat die autocomplete niet meer werkt, nu dat ik de standaard HTML <input text> heb vervangen door de h:inputText.
Weet iemand misschien een (simpele?) oplossing om dit snel op te lossen?
Snap niet precies waarom hij niet meer werkt.
Ik probeer een autocomplete functie te maken voor mijn tekstveld, zodat bij het intypen van de eerste paar letters mogelijkheden worden getoond. Deze data wordt ingeladen uit een database.
Deze functie heb ik op de volgende manier werkend gekregen:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
| <script> $(function() { var employeeList = [ <c:forEach items="#{employeeController.allEmployees}" var="employee" varStatus="loop"> '#{employee.employeeNumber} #{employee.fullName}' <h:outputText value="#{!loop.last ? ',' : ''}"/> </c:forEach> ]; $( "#employees" ).autocomplete({ source: employeeList }); }); </script> |
En dat dit in de html gezet:
HTML:
1
| <input type="text" id="employees" /> |
Nu wil ik ook een optie maken dat als ik op een button druk, de informatie uit het textveld wordt weergegeven in het scherm. Dit heb ik op de volgende manier werkend gekregen:
Java Server Faces:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <h:form id="filterform"> <h:panelGroup id="active_filter"> <input type="hidden" value="0" id="theValue" /> Actieve filters: <br /> <div id="myDiv"> <c:forEach var="emp" items="#{employeeController.filterEmployees}"> <div id="my#{emp.employeeNumber}Div" class="name"> <h:outputText value="#{emp.employeeNumber}"/> <h:outputText value="#{emp.fullName}"/> </div> </c:forEach> </div> </h:panelGroup> <div> Naam: <h:inputText onclick="this.value='';" id="employees" value="#{employeeController.employeeToAdd}" /> <h:commandButton value="Toevoegen"> <f:ajax execute="employees" event="click" render="filterform" /> </h:commandButton> </div> </h:form> |
Deze functie werkt verder wel ok, dat is het probleem niet. Mijn probleem is dat die autocomplete niet meer werkt, nu dat ik de standaard HTML <input text> heb vervangen door de h:inputText.
Weet iemand misschien een (simpele?) oplossing om dit snel op te lossen?