2

我有一个带有自动完成功能的基本文本框，其中列出了彩虹的颜色，但我想更改它，以便当您选择一种颜色时，它会以该颜色出现（即，红色这个词是红色的）但我不能弄清楚怎么做。

继承人的代码：

<!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>
4

4 回答 4

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', '');
         }
     });
 });
于 2013-03-01T12:51:16.363 回答
0 
you can do this on blur event....

$("#rainbow1").blur(function() {
 $(this).css('background',$(this).val());
});
于 2013-03-01T12:44:28.047 回答
0

基本示例：

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

您需要使用自动完成的选择和search选项。

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

于 2013-03-01T12:44:42.250 回答
0

您的自动完成声明应包含select属性。这样，您可以在用户选择项目时更改颜色。

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

在此处查看演示。

文档在这里。

于 2013-03-01T12:51:43.703 回答