4

I'm using a <datalist> to allow selection of an option, yet still allow type-in values. Here's what I mean:

<input list="cities" name="city">
<datalist id="cities">
    <option value="Portland">
    <option value="San Francisco">
</datalist>

Once a city is chosen, opening the dropdown only shows that city unless I manually hit backspace to clear it. I thought I might fix that with jquery like this:

$('input[name=city]').click(function() {
  $('input[name=city]').empty();
});

That's great, but it doesn't work. I've seen in other examples how to remove a 'selected' flag (here also), but I don't see that it applies to a <datalist>.

Here's a jsfiddle: https://jsfiddle.net/tedder/ekaLc64t/2/

Community
  • 1
  • 1
tedder42
  • 23,519
  • 13
  • 86
  • 102
  • tedder42, this may help you: http://stackoverflow.com/a/37479774/854222 – Joel Hernandez Aug 30 '16 at 23:41
  • @JoelHernandez yeah, that did it. Too bad the other one wasn't accepted. If you leave an answer here I'll accept it. [here's my completed jsfiddle](https://jsfiddle.net/tedder/ekaLc64t/8/). – tedder42 Aug 31 '16 at 00:09
  • tedder42, the answer was not mine. It's better to give credit to the original author. Have a great day... – Joel Hernandez Aug 31 '16 at 14:36

1 Answers1

4

I am not sure if this is what you want, but try to change the code to:

  $('input[name=city]').focusin(function() {
    $('input[name=city]').val('');
  });
  $('#xx').click(function() {
    $('input[name=city]').val('');

  });

https://jsfiddle.net/ekaLc64t/9/

Fabio Santiago
  • 81
  • 6