5

私はjqueryのオートコンプリート機能を使用していますが、ドロップダウンリストから何かを選択すると、入力フィールドにラベルではなく値が入力されることを除いて、うまく機能しています。

私のコードは次のとおりです。

 <?php
   $query =     mysql_query("SELECT users.* FROM users JOIN peers ON peers.peer = users.user_id WHERE peers.user_id = '".$_SESSION['id']."'")or  die(mysql_error());
   $count   =   mysql_num_rows($query);
   $i   =   0;

   while($row = mysql_fetch_assoc($query))
   {
       $first[$i]   =   $row['first_name'];
       $last[$i]    =   $row['last_name'];
       $user_id[$i] = $row['user_id'];

       $i++;
   }

$data = "";

for($i=0;$i<$count;$i++)
{
    if($i != ($count-1))
    {
        $data .= '{ value: '.$user_id[$i].', label: "'.$first[$i].' '.$last[$i].'" }, ';
    } else
    {
        $data .= '{ value: '.$user_id[$i].', label: "'.$first[$i].' '.$last[$i].'" }';
    }
}
?>
<script type="text/javascript">
$("#auto").autocomplete({ 
    source: data,
    select: function(event, ui)
    {
        var id = ui.item.value;
        var name = ui.item.label;
    }
  });
  </script>

  <input type="text" value="Enter a connection's name" id="auto" />
4

3 に答える 3

17

select イベントのデフォルトの動作は、入力を ui.item.value で更新することです。このコードは、イベント ハンドラーの後に実行されます。

false を返すか、event.preventDefault() を呼び出して、これが発生しないようにします。これを試して、

<script type="text/javascript">
    $("#auto").autocomplete({ 
        source: data,
        select: function(event, ui)
        {
           var id = ui.item.value;
           var name = ui.item.label;
           $("#auto").val(name);
           return false;
        },
        focus: function(event, ui){
          return false;
        }
   });
</script>
于 2013-07-18T11:03:48.207 に答える
2

label最初の配列を前に配置してみるか、jQuery のドキュメント.autocomplete() でカスタム結果を使用しvalueてこのコードを確認できます。

<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;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
            .appendTo( ul );
    };
});
</script>



<div class="demo">
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="/demos/autocomplete/images/transparent_1x1.png"  class="ui-state-default"//>
<input id="project"/>
<input type="hidden" id="project-id"/>
<p id="project-description"></p>
</div>
于 2012-05-02T01:14:06.533 に答える
0

オートコンプリート選択イベントのデフォルトの動作は、入力フィールドにテキストではなく値を入力することです

ただし、次のコードを使用して、選択時のテキストで入力フィールドを更新するだけでなく、オプションを下にスクロールすることもできます。

<script type="text/javascript">
    $("#auto").autocomplete({ 
        source: data,
        select: function(event, ui)
        {
           var id = ui.item.value;
           var text = ui.item.label;
           $("#auto").val(name);
           return false;
        },
        focus: function (event, ui) {
                $("#auto").val(ui.item.label);
                return false;
            }
    });
</script>
于 2020-07-04T15:58:38.507 に答える