2017-05-24 9 views
0

オプションが表示されているときとは別に、Jqueryのオートコンプリートコードが完全に動作しています。選択できません。私は同じようなインスタンスを見つけようとしましたので、私は質問を複製しませんが、他のすべての質問は、マウスが動作していないことに関連しているようですが、キーはectです。Jqueryオートコンプリートの結果をマウスまたはキーで選択できません

私は問題がありますが、すべての正しいオプションにカーソルを置くことができます(下線)する必要があるので、ホバリングされたオプションのCSSが変更されますが、クリックするかEnterキーを押すと、ホバー/フォーカスのCSSが消えます。まだ表示されており、入力ボックスにはテキストはありません。何も押されなかったようなものです。 jqueryのリンクがダウンしているかどうかはわかりません(サイトの他のjqueryは完全に動作します)。私はこの1つと本当に苦労しているので、どんな助けでも本当に感謝しています。ありがとうございました。

select: function(event, ui) { 
     var origEvent = event; 
     while (origEvent.originalEvent !== undefined) 
      origEvent = origEvent.originalEvent; 
     if (origEvent.type == 'keydown') 
      $("#searchBox").click(); 
    }, 
    ... 

または

select: function(event, ui) { 
    $("#searchBox").val(ui.item.value); 
    return false; 
    }, 

は、それらのどれもが違いを作るように見えるん:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

    </head> 

<body> 
<?php 

// query to find usernames for the search bar 
    $userSearch = $pdo->prepare("SELECT username FROM members"); 


    $userSearch->execute([]); 


    $userSearchResult = []; 
while ($row = $userSearch->fetch(PDO::FETCH_ASSOC)) { 
    $userSearchResult[] = [ 
     'value' => $row['username'], 
     'category' => "username" 
    ]; 
} 

// query to find teams for the search bar 
    $teamSearch = $pdo->prepare("SELECT teamName FROM teams"); 


    $teamSearch->execute([]); 


     $teamSearchResult = []; 
while ($row = $teamSearch->fetch(PDO::FETCH_ASSOC)) { 
    $teamSearchResult[] = [ 
     'value' => $row['teamName'], 
     'category' => "teams" 
    ]; 
} 

    $result = array_merge(
    $userSearchResult, 
    $teamSearchResult 
); 

?> 

<script type="text/javascript"> 
    //Assign php generated json to JavaScript variable 
    var searches = <?php echo json_encode($result)?> 

    $.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
     var self = this, 
      currentCategory = ""; 
     $.each(items, function(index, item) { 
      if (item.category != currentCategory) { 
       ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
       currentCategory = item.category; 
      } 
      self._renderItem(ul, item); 
     }); 
    } 
}); 

$(function() { 
    $("#searchBox").catcomplete({ 
     source: searches 
    }); 
    }); 

</script> 

は、私のようなselect:機能に関係するものの数を試みました。

私はselect関数がデフォルト状態を持っていることを知っています。私はそれがうまくいかないと思うので、私は間違っている可能性があります。

答えて

0

最終的に解決策が見つかりました。オートコンプリート(catcomplete)が選択するまで働いていたが、私を選択させる前に使用していたウィジェットコード。 this siteのソースコードは、私が使用していたはずのコードであり、以下は現在完全に動作しています:

<script type="text/javascript"> 
    //Assign php generated json to JavaScript variable 
    var searches = <?php echo json_encode($result)?> 

    $(function() { 
    $.widget("custom.catcomplete", $.ui.autocomplete, { 
     _create: function() { 
     this._super(); 
     this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)"); 
     }, 
     _renderMenu: function(ul, items) { 
     var that = this, 
      currentCategory = ""; 
     $.each(items, function(index, item) { 
      var li; 
      if (item.category != currentCategory) { 
      ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
      currentCategory = item.category; 
      } 
      li = that._renderItemData(ul, item); 
      if (item.category) { 
      li.attr("aria-label", item.category + " : " + item.label); 
      } 
     }); 
     } 
    }); 

$(function() { 
    $("#searchBox").catcomplete({ 
     source: searches, 
    }); 
    }); 
    }); 

</script> 
関連する問題