1

I have the following code working together with a script that populates fields on autocomplete.

What I would like to do is instead of having an autocomplete text box - use the city field in a drop down / select option field so instead of the user typing the city they select from the drop down. 

 $cities = array( array('city'=>'New York', state=>'NY', zip=>'10001'), array('city'=>'Los Angeles', state=>'CA', zip=>'90001'), array('city'=>'Chicago', state=>'IL', zip=>'60601'), array('city'=>'Houston', state=>'TX', zip=>'77001'), array('city'=>'Phoenix', state=>'AZ', zip=>'85001'), array('city'=>'Philadelphia', state=>'PA', zip=>'19019'), array('city'=>'San Antonio', state=>'TX', zip=>'78201'), array('city'=>'Dallas', state=>'TX', zip=>'75201'), array('city'=>'San Diego', state=>'CA', zip=>'92101'), array('city'=>'San Jose', state=>'CA', zip=>'95101'), array('city'=>'Detroit', state=>'MI', zip=>'48201'), array('city'=>'San Francisco', state=>'CA', zip=>'94101'), array('city'=>'Jacksonville', state=>'FL', zip=>'32099'), array('city'=>'Indianapolis', state=>'IN', zip=>'46201'), array('city'=>'Austin', state=>'TX', zip=>'73301'), array('city'=>'Columbus', state=>'OH', zip=>'43085'), array('city'=>'Fort Worth', state=>'TX', zip=>'76101'), array('city'=>'Charlotte', state=>'NC', zip=>'28201'), array('city'=>'Memphis', state=>'TN', zip=>'37501'), array('city'=>'Baltimore', state=>'MD', zip=>'21201'), ); 
 
// Cleaning up the term $term = trim(strip_tags($_GET['term']));
 
// Rudimentary search $matches = array(); foreach($cities as $city){ if(stripos($city['city'], $term) !== false){ // Add the necessary "value" and "label" fields and append to result set $city['value'] = $city['city']; $city['label'] = "{$city['city']}, {$city['state']} {$city['zip']}"; $matches[] = $city; } }
 
// Truncate, encode and return the results $matches = array_slice($matches, 0, 5); print json_encode($matches);

And the following is my script:

 Drupal.behaviors.mywebform = { attach: function (context, settings) { var ac_config = { source: "/devtest/sites/democities.php", select: function(event, ui){ $("#edit-submitted-info-city").val(ui.item.city); $("#edit-submitted-info-state").val(ui.item.state); $("#edit-submitted-info-zip").val(ui.item.zip); }, minLength:1 }; $("#edit-submitted-info-city").autocomplete(ac_config); }};

Any suggestions?

Improve this question

1 Answer 1

Reset to default
0

probably not really drupal realated. But here you go:

Drupal.behaviors.mywebform = { attach: function (context, settings) { $.ajax({ url:'/devtest/sites/democities.php', type:'POST', dataType: 'json', success: function( json ) { // if #edit-submitted-info-city is not a select you will have to make it one, or take the select that is in, or create one select in it. $('#edit-submitted-info-city').append('<select>').attr('id', 'stackexchangeExample'); $.each(json, function(i, value) { $('#stackexchangeExample').append($('<option>').text(value.city).attr('value', value.city)); }); } }); }};

you might want to make sure that you run this only once, adjust the creation of the select element accordingly. or add a once() implementation

Improve this answer
5
  • Thanks but did not work for me. I am assuming to use the above I need to keep the city field as a text and the first line changes the text to a select. When I view this in Firebug I see that the <select> tags are placed AFTER </input> which I believe is not what we want. If I change the field type to a Select Option and add the first value from my php (ie. San Jose) as an option only San Jose shows up as an option. If it matters I am using this in webform. Commented Mar 25, 2015 at 14:33
  • this is not realy a drupal question, and you did not provide any source code, feel free to setup an example at jsfiddle.net than one might have a look. the appending is done at $('#edit-submitted-info-city').append('<select>' if you have to empty that element first do so. also make sure your select keeps the name of the input that is beeing replaced. Commented Mar 25, 2015 at 16:34
  • how is this not a drupal question when I am using drupal and the webform module? If I create a form outside of drupal and use the code it works fine but in drupal webform is where i have the issue. Commented Mar 25, 2015 at 17:01
  • because you are asking questions about javascript and html. I don't know webform, maybe it has a select field itself, than you dont have to modify the autocomplete stuff. the solution I posted earlier should get you in the right direction (if your a developer), if you are only a site builder you probably should ask for this on the webform queue, but I think the will have a select field with options already ready, no need to do anything autocomplete related, like the php + json you posted earlier. Commented Mar 25, 2015 at 17:53
  • thanks. what my ultimate goal is to have the user choose the city from a drop down and that would autocomplete the state and zip code field. webform does have its own select field with options available and i can dynamically add options but then i get lost trying to do the autocomplete of the state and zip code field. Commented Mar 25, 2015 at 19:50

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.