Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Designing Searchable drop downs in LC form designing

Avatar

Level 4
Hi,

I want to design an eform which has a searchable drop down box. That
is as someone types in the required contents into the dropdown the
displayed contents of the drop down should shrink.It should have the
search feature  in google search(as we type in the result set keeps showing and we can choose from there). If someone knows how to
incorporate this searchable feature into the drop downs while
designing the form, please help. An example to show the way in which
it can be implemented would be really helpful.

Thanks,
Sayoni.

3 Replies

Avatar

Level 10

Hi Sayoni,

The closest I was able to this functionality was with a textbox that the user could type into and in the change event I populated a listbox that I lined up under the textbox and hid when the textbox was empty.

I've attached a form and some xml as a sample ... it expects the user to enter a country, so type an "A" and all the countries starting with A appear, which they can then select by clicking the entry in the listbox.

The version that we went live with required the user to double click the listbox and single click just moved the country name to the textbox.

Anyway hope this gets you started.

Bruce

Avatar

Level 4

Hi Bruce,

Thanks for the reply. The example sent by you is very relevant to what i need to design and am sure its going to help a lot. But in the attachments that u have sent the XML attachment is not getting downloaded. I have tried using some other XML but that does not seem to work. Can u please once again attach the XML. It would be really helpful if u can send me your XML.

Thanks,

Sayoni

Avatar

Level 10

Hi Sayoni,

This is just part of the xml file I uploaded but should give you enough to get the sample working.

Hope it helps

Bruce

<?xml version="1.0" encoding="UTF-8" ?>
<countries>
<country id="AF" name="AFGHANISTAN" />
<country id="AX" name="ÅLAND ISLANDS" />
<country id="AL" name="ALBANIA" />
<country id="DZ" name="ALGERIA" />
<country id="AS" name="AMERICAN SAMOA" />
<country id="AD" name="ANDORRA" />
<country id="AO" name="ANGOLA" />
<country id="AI" name="ANGUILLA" />
<country id="AQ" name="ANTARCTICA" />
<country id="AG" name="ANTIGUA AND BARBUDA" />
<country id="AR" name="ARGENTINA" />
<country id="AM" name="ARMENIA" />
<country id="AW" name="ARUBA" />
<country id="AU" name="AUSTRALIA" />
<country id="AT" name="AUSTRIA" />
<country id="AZ" name="AZERBAIJAN" />
<country id="BS" name="BAHAMAS" />
<country id="BH" name="BAHRAIN" />
<country id="BD" name="BANGLADESH" />
<country id="BB" name="BARBADOS" />
<country id="BY" name="BELARUS" />
<country id="BE" name="BELGIUM" />
<country id="BZ" name="BELIZE" />
<country id="BJ" name="BENIN" />
<country id="BM" name="BERMUDA" />
<country id="BT" name="BHUTAN" />
<country id="BO" name="BOLIVIA, PLURINATIONAL STATE OF" />
<country id="BA" name="BOSNIA AND HERZEGOVINA" />
<country id="BW" name="BOTSWANA" />
<country id="BV" name="BOUVET ISLAND" />
<country id="BR" name="BRAZIL" />
<country id="IO" name="BRITISH INDIAN OCEAN TERRITORY" />
<country id="BN" name="BRUNEI DARUSSALAM" />
<country id="BG" name="BULGARIA" />
<country id="BF" name="BURKINA FASO" />
<country id="BI" name="BURUNDI" />
<country id="KH" name="CAMBODIA" />
<country id="CM" name="CAMEROON" />
<country id="CA" name="CANADA" />
<country id="CV" name="CAPE VERDE" />
<country id="KY" name="CAYMAN ISLANDS" />
<country id="CF" name="CENTRAL AFRICAN REPUBLIC" />
<country id="TD" name="CHAD" />
<country id="CL" name="CHILE" />
<country id="CN" name="CHINA" />
<country id="CX" name="CHRISTMAS ISLAND" />
<country id="CC" name="COCOS (KEELING) ISLANDS" />
<country id="CO" name="COLOMBIA" />
<country id="KM" name="COMOROS" />
<country id="CG" name="CONGO" />
<country id="CD" name="CONGO, THE DEMOCRATIC REPUBLIC OF THE" />
<country id="CK" name="COOK ISLANDS" />
<country id="CR" name="COSTA RICA" />
<country id="CI" name="CÔTE D'IVOIRE" />
<country id="HR" name="CROATIA" />
<country id="CU" name="CUBA" />
<country id="CY" name="CYPRUS" />
<country id="CZ" name="CZECH REPUBLIC" />
<country id="DK" name="DENMARK" />
<country id="DJ" name="DJIBOUTI" />
<country id="DM" name="DOMINICA" />
<country id="DO" name="DOMINICAN REPUBLIC" />
</countries>