Reset text field on Mouse press / Input - jQuery UI Autocomplete

Question

Simple JS fiddle containing my code in working state

I have a jQuery UI Autocomplete field, with a Dropdown button attached. It works floorlessly, however - its kinda annoying you have to manually delete the words inside the field for a search.

I am unsure if jQuery UI has a feature for it, unless i'd love to know.

I've tried to use onClick functions with JS, however since my field is not exactly an "form field" I've got kinda lost here.

My goal is to: reset the text field when a user presses it.It has prewritten text in it "Please select (Or Type)"

my cshtml file looks as following cshtml

And it looks like this on the browser browser

Code for Image 1:

<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
        <option selected="selected" type="text" onclick="resetText()" value="0">Please select (Or Type)</option>
    </select>
    <span asp-validation-for="Dinosaur" class="text-dark" />

As you can see it has the text in, which i have to CTRL + A, DELETE before i can search in my field.

A function to clear this text when a user presses it will easen the pressure.

I might just be stupid to see the simple solution, i just feel like I've tried some of the things that I'd believe would work. (As the onclick="ResetText()" with a JS code attached to it)

When I click on drop down this is what showing.

Best Regards,

edit: Just to put it in here, when clicking the dropdown this is what shows: [link](https://i.imgur.com/xZU9PPj.png) — Jesper MENIX Lund, Oct 23 '19 at 05:54
It was too long to post here, so tossed the script from jQuery auto complete into a pastebin: https://pastebin.com/cFMqBrDb — Jesper MENIX Lund, Oct 23 '19 at 06:07

score 0 · Answer 1 · answered Oct 23 '19 at 06:06

0

You don't want to wire an onclick listener on your option element, you want an onchange event listener on your select element. onclick is not supported on option elements.

answered Oct 23 '19 at 06:06

foobar2k19

84
4

Yeah, tried here after as seen in the question above - an onchange doesn’t seem to be the solution either. I’m starting to doubt if its possible - without a bandaid solution, of making something like a double code & a css swapper inbetween, however i really wanna avoid that! – Jesper MENIX Lund Oct 23 '19 at 17:58

score 0 · Answer 2 · answered Oct 23 '19 at 06:14

0

use onchange instead of using onclick and this action should be on the select tag. not on the options. Try this example.

$('select').on('change', function() {
  if (this.value === 'disabled') {
    this.value = '';
  }
  console.log(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select asp-for="Dinosaur" class="combobox" id="dinoType" asp-items="Html.GetEnumSelectList<Dinosaurs>()">
        <option selected="selected" type="text" value="disabled">Please select (Or Type)</option>
        <option type="text" value="One">One</option>
        <option type="text" value="two">two</option>
    </select>
    <span asp-validation-for="Dinosaur" class="text-dark" />

answered Oct 23 '19 at 06:14

Yahiya

761
4
15

Cheers, just gonna try this in a minute! So i'll suppose i gotta add option thingything to the HTML – Jesper MENIX Lund Oct 23 '19 at 07:25
@JesperMENIXLund Is this answer solved your issue? Then vote up the answer. So in future other candidates can find it easier. – Yahiya Oct 23 '19 at 07:40
Sadly it doesn't seem to be. https://streamable.com/9zz9i Made a little screencap of it, issue still seems to be persisting (This is my first click on the element) Added the .js code provided into my .js file added value "disabled" on the – Jesper MENIX Lund Oct 23 '19 at 07:42
@JesperMENIXLund Try `onchange` instead of the `onclick` . This answer may help you [https://stackoverflow.com/a/3487274/7057771](https://stackoverflow.com/a/3487274/7057771) – Yahiya Oct 23 '19 at 07:45
taking a look on it. I will mark the topic as answered once i feel it is, keeping it open for now as the issue is still persist – Jesper MENIX Lund Oct 23 '19 at 08:00
@JesperMENIXLund Can you share a jsfiddle. So we can update the code there. :) – Yahiya Oct 23 '19 at 08:03
https://jsfiddle.net/menix/1kLxvacp/ The text is there, and set up same way it is at mine - what i need is that the text in the box, dissapears either upon mouse clicking on it, or activity (as in you write the first letter) The field is there, dropdown is added on my end since its loading from an ASP MVC. But you can write in it – Jesper MENIX Lund Oct 23 '19 at 08:27
Still no luck. I’m starting to doubt if its even possible without a really wonky bandaid solution. I hope the fiddle is some kind of help! – Jesper MENIX Lund Oct 23 '19 at 17:59
did you manage to get a grab of it? Still trying 6 days later : D – Jesper MENIX Lund Oct 29 '19 at 14:47

Reset text field on Mouse press / Input - jQuery UI Autocomplete

2 Answers2