Question

我有一个带有自动填充功能的基本文本框，其中列出了彩虹的颜色，但我想更改它，以便当您选择颜色时，它会以该颜色出现（即红色字样为彩色）红色）但我无法弄清楚如何做到这一点。

下面是代码：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
      $(function () {
          var colours = [
          "red",
          "orange",
          "yellow",
          "green",
          "blue",
          "indigo",
          "violet",
          ]

          $("#rainbow1").autocomplete({            
              source: colours
          });
      });

  </script>
</head>
<body>

<div class="ui-widget">
  <label for="rainbow1" style="color:red">Rainbow1: </label>
  <input type="text"  id="rainbow1" /> </br>
</div>


</body>
</html>

Answer 1

请参阅：http://jsfiddle.net/gkxe4/1/

 $(function () {
     var colours = [
         "red",
         "orange",
         "yellow",
         "green",
         "blue",
         "indigo",
         "violet", ];

     $("#rainbow1").autocomplete({
         source: colours,
         open: function (event, ui) {
             $(".ui-autocomplete li > a").each(function () {
                $(this).css('color', $(this).text());
             });
         },
         select: function (event, ui) {
             alert(ui.item.value);
             $("#rainbow1").css("color", ui.item.value);
         },
         search: function () {
             $(this).css('color', '');
         }
     });
 });

Answer 2

you can do this on blur event....

$("#rainbow1").blur(function() {
 $(this).css('background',$(this).val());
});

Answer 3

基本示例：

$("#rainbow1").autocomplete({
    source: colours,
    select: function(event, ui) {
        $(this).css('color', ui.item.value);
    },
    search: function() {
        $(this).css('color', '')
    }
});

您需要使用自动填充的select和search选项。

http://jsfiddle.net/dfsq/eSzyV/

Answer 4

您的自动填充声明应包含select属性。这样，只要用户选择项目，您就可以更改颜色。

$("#rainbow1").autocomplete({
    source: colours,
    select: function(event, ui) {
        $("#rainbow1").css("color", ui.item.label);
    }
});

查看演示here。

文档here。

格式化数组中的文本？

4 个答案: