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

オートコンプリート宣言にはselectプロパティが含まれている必要があります。このようにして、ユーザーが項目を選択するたびに色を変更できます。

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

ここでデモを見る。

ドキュメントはこちら。

于 2013-03-01T12:51:43.703 に答える
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 に答える