Implementing autocomplete field in a GSP file (Not HTML form)

Development
1

Hello, I am developing a drug order module and trying to implement the auto-complete functionality when the user enters the name of the drug. e.g. When the user starts typing ‘Asp’, the form must automatically provide the option ‘Aspirin’

This field will list suggested options from the list of concepts linked with the Concept Set ID 162552 which stands for Reference Application Common Drug Allergens, I am trying to fetch all the Concepts (Allergens) in that set.

Since this is a GSP file, using the < obs > tag does not work The following is what I have at this point -

< form method=“post” > < div class=“fields”>Drug name < /div > < button class=“confirm right” id=“btn-place” name=“confirmDrug” type=“submit” onclick=“showIndividualOrderDetailsWindow()” >${ ui.message(“Next”) }< /button > < /form >

I am just attempting to fetch a list of dropdown options using < obs conceptId=“162552” /> within the above form. All I get is a blank rectangular box with no text input field or fetched data. Please suggest if there is a way of implementing this

2

Hi @hariniparth,

The closest widget that I can think of is UI Commons’ Angular directive <select-concept-from-list>. This makes an autocomplete field given a list of concepts. See examples of its usage in Order Entry UI.

But this would mean using Angular, is that an option for you?

3

Thank you, I have looked into it but have not yet been able to implement it this way or find an option to include a HTML form in my existing module…I am not sure which approach will fit in better with what I have so far

4

You really should develop this new module with Angular + REST WS. You won’t have any problem with Hibernate persistents then :slight_smile:

5

@mksd @dkayiwa , i want to do an autocomplete field that selects a concept from a concept set, however am currently using Jquery not angular ,

can i have any example usage of this field/autocomplete fragment in uicommns ??

cc @mogoodrich @ibacher

1 Like
6

Oh by the way , i simply acheievd this by the HTML5 <dataList> tag

in the fragment

 <input type="text" list="list" name ="diagnosis" >       
<datalist id="list">
           <% diagnoses.each { dg -> %> 
              <option value="${dg}">
            <% } %>
        </datalist>

and in the Fragment Contrller

conceptService = Context.getConceptService();
		
		List<Concept> concepts = conceptService.getConceptByName(UCIOnchologyConstants.DIAGNOSIS_CONCEPT_SET_NAME)
		        .getSetMembers();
		
		List<String> names = new ArrayList<String>();
		for (Concept c : concepts) {
			names.add(c.getName().getName());
		}
		
		model.addAttribute("diagnoses", names);
2 Likes
7

Before HTML5 , autocomplete was only achievable by Java script , we would need to update some of our re-usable fragmets