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

Question

Simple JS fiddle containing my code in working state

我有一个jQuery UI自动完成字段，并附加了一个下拉按钮。它在地面上工作，但是-有点烦人，您必须手动删除字段中的单词以进行搜索。

除非我很想知道，否则我不确定jQuery UI是否具有它的功能。

我尝试将onClick函数与JS一起使用，但是由于我的字段不完全是一个“表单字段”，因此我在这里有些迷路。

我的目标是：当用户按下文本字段时重置文本字段。它具有预写的文本“请选择（或键入）”

我的cshtml文件如下所示cshtml

并且在浏览器上看起来像这样 browser

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

如您所见，其中包含文本，我必须先按CTRL + A并删除，然后才能在字段中搜索。

当用户按下时清除此文本的功能将减轻压力。

我可能只是愚蠢地看到了简单的解决方案，我只是觉得自己已经尝试了一些我认为会起作用的事情。 （作为附加了JS代码的onclick =“ ResetText（）”）

当我单击drop down this时显示。

最好的问候，

Answer 1

您不想在选项元素上连接onclick侦听器，而在select元素上需要onchange事件侦听器。选项元素不支持onclick。

Answer 2

使用onchange而不是使用onclick，并且此操作应在select标记上。不在选项上。试试这个例子。

$('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" />