时间戳

首页 > 解决方案 > 删除 jquery 自动完成默认焦点和选择行为

jquery - 删除 jquery 自动完成默认焦点和选择行为

问题描述

有没有办法禁用 jquery 自动完成的默认焦点和选择行为？

我想要的是：

  1. 聚焦在一个项目上时没有颜色变化（蓝色背景和白色前景）
  2. 仅在单击“查看”或“编辑”按钮时才应执行操作

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

这是 jsfiddle 代码，它是 Jquery UI 网站 ( https://jqueryui.com/autocomplete )上自定义数据和显示示例的修改版本

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

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Custom data and display</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <style>
      #project-label {
        display: block;
        font-weight: bold;
        margin-bottom: 1em;
      }

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

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

    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $(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,
            focus: function(event, ui) {
              $("#project").val(ui.item.label);
              return false;
            },
            select: function(event, ui) {
              $("#project").val(ui.item.label);
              $("#project-id").val(ui.item.value);
              $("#project-description").html(ui.item.desc);
              $("#project-icon").attr("src", "images/" + ui.item.icon);

              return false;
            },
            focus: function(event, ui) {
            event.PreventDefault();
            }
          })
          .autocomplete("instance")._renderItem = function(ul, item) {
            var div = $("<div style='border:1px solid #ccc;'>")
              .append($("<h4>").text(item.label))
              .append($("<p>").text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))
              .append($("<button>").text("View"))
              .append($("<button>").text("Edit"))

            ;
            return $("<li>")
              .append(div)
              .appendTo(ul);
          };
      });

    </script>
  </head>

  <body>

    <div id="project-label">Select a project (type "j" for a start):</div>
    <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
    <input id="project">
    <input type="hidden" id="project-id">
    <p id="project-description"></p>


  </body>

</html>

在 jsfiddle 上执行

任何帮助，将不胜感激！

标签： jqueryjquery-ui

解决方案

我建议不要试图覆盖自动完成的一些基础知识。也许考虑一个小的调整。

工作示例：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);
  });
});

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

在菜单中每个项目的焦点上，ui-state-active添加 。如果您觉得需要，您可以在 CSS 中调整或覆盖它。

希望这可以帮助。

推荐阅读