在鼠标按下/输入时重置文本字段 - jQuery UI 自动完成

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,

Answer 1

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.

Answer 2

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" />