Question

是否可以禁用默认焦点并选择jquery自动完成的行为？

我想要的是：

专注于某项（蓝色背景和白色前景）时颜色不变
仅应在单击查看或编辑按钮时执行操作

我尝试在焦点上添加event.PreventDefault（）并选择选项，但没有效果。我可以添加一个自定义CSS，以使焦点不会改变颜色，但是在更复杂的项目上，焦点会分散注意力（因此，我想完全禁用默认操作）。

这是jsfiddle代码，它是“自定义”数据的修改版本，并在Jquery UI网站（https://jqueryui.com/autocomplete）上显示示例

https://jsfiddle.net/howardlo/epzmL6n7/14

ListMap

任何帮助将不胜感激！

Answer 1

我建议您不要尝试覆盖自动完成功能的某些基础知识。也许考虑一下小的调整。

工作示例：https://jsfiddle.net/Twisty/ojkzbte4/61/

HTML

<div id="project-label">Select a project (type "j" for a start):</div>
<input id="project">
<button id="project-view" disabled="true">View</button>
<button id="project-edit" disabled="true">Edit</button>

CSS

#project-label {
  display: block;
  font-weight: bold;
  margin-bottom: 1em;
}

#project-icon {
  float: left;
  height: 32px;
  width: 32px;
}

#project-description {
  margin: 0;
  padding: 0;
}

.ui-autocomplete .my-item {
  background-color: #FFF;
}

JavaScript

window.view = function(p) {
  console.log("view", p);
  // Execute View of Project
};

window.edit = function(p) {
  console.log("edit", p);
  // Execute Edit of Project
};

$(function() {
  var projects = [{
      value: "jquery",
      label: "jQuery",
      desc: "the write less, do more, JavaScript library",
      icon: "jquery_32x32.png"
    },
    {
      value: "jquery-ui",
      label: "jQuery UI",
      desc: "the official user interface library for jQuery",
      icon: "jqueryui_32x32.png"
    },
    {
      value: "sizzlejs",
      label: "Sizzle JS",
      desc: "a pure-JavaScript CSS selector engine",
      icon: "sizzlejs_32x32.png"
    }
  ];


  $("#project").autocomplete({
      minLength: 0,
      source: projects,
      classes: {
        "ui-state-active": "my-item"
      },
      focus: function(event, ui) {
        //$("#project").val(ui.item.label);
        console.log(event, ui, ui.item);
        $(this).find(".ui-state-active").removeClass("ui-state-active");
        return false;
      },
      select: function(event, ui) {
        $("#project").val(ui.item.label);
        $("#project-view, #project-edit").prop("disabled", false);
        $("#project").data("project-id", ui.item.value);

        //return false;
      }
    })
    .autocomplete("instance")._renderItem = function(ul, item) {
      var div = $("<div style='border:1px solid #ccc;'>");
      $("<h4>").text(item.label).appendTo(div);
      /*
      $("<p>").text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.").appendTo(div);
      $("<button>").html("View").click(function(e) {
        e.preventDefault();
        console.log("view", item);
        // Perform View Function on item
      }).appendTo(div);
      $("<button>").html("Edit").click(function(e) {
        e.preventDefault();
        console.log("edit", item);
        // Perform Edit Function on item
      }).appendTo(div);
      */
      return $("<li>")
        .append(div)
        .appendTo(ul);
    };
  $("#project-view, #project-edit").click(function(e) {
    var func = $(this).attr("id").split("-")[1];
    var projectId = $("#project").data("project-id");
    console.log(func, projectId);
    window[func](projectId);
  });
});

当用户到达输入字段时，按钮的状态被禁用。当他们搜索并选择一个选项时，这些按钮将被启用，然后可以在传入项目ID的情况下执行view()或edit()。

在菜单中每个项目的焦点上，添加了ui-state-active。如果您认为有必要，可以在CSS中进行调整或覆盖。

希望这会有所帮助。

删除jQuery自动完成默认焦点并选择行为

1 个答案: