PHP MySQLi JSON选择框

Question

我已经作出了选择框/组合框groupopt有不同，这使得主区域的顶部和部分区域在它之下。 它工作正常，但我想要的东西，而我AB型AB包含将首屈一指，但我想，当我按下TAB的第一项或含有AB项将被选中。

请帮忙。

代码如下：

演示： http : //jsfiddle.net/54v8nacp/15/

<link rel="stylesheet" type="text/css" href="easyui.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>

的CSS

.combobox-group {
  color: #08c; /* color of main page combobox Main Area Color  */
  border-top:1px dotted #DDDDDD;
} 

.combobox-group.active {
  color: #08c;
  background: inherit;
  position: absolute;
  top: 0;
  width: 180px;
  border-bottom: 3px solid #DDDDDD;
}

这是输入和js：

<input id="eui" name="browser" style="width:100%;">


$('#eui').combobox({
    panelHeight:'225px',
    url: 'combobox_data2.php',
    method: 'get',
    valueField:'value',
    textField:'text',
    groupField:'group',
    prompt: 'Select your area',
    selectFirst: true,
    groupPosition:'sticky'
 });

combobox_data2.php

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("localhost", "root", "", "lepetit");

$result = $conn->query("
SELECT
    area_sub.id as idS, area_sub.ename as eSub, area_main.ename as eMain, area_main.id as idM
FROM
    area_sub
INNER JOIN
    area_main ON area_main.id = area_sub.m_area
WHERE
    area_sub.m_area=area_main.id
order by area_sub.m_area asc
");

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "[") {$outp .= ",";}
    $outp .= '{
        "value":"'  . $rs["idS"] . '",';
    $outp .= '"text":"'   . $rs["eSub"]        . '",';
    $outp .= '"group":"'. $rs["eMain"]     . '"}';
}
$outp .="]";

$conn->close();

echo($outp);

js代码

$.extend($.fn.combobox.methods, {
  sticky: function(cbo){
    cbo.combobox('panel').on('scroll',function(){
      var pan=$(this), top=pan.scrollTop(), grps=pan.find('.combobox-group');
      $.each(grps,function(idx){
        var row=$(this);
        if(row.position().top < 8) {
          grps.not(row).removeClass('active');
          row.addClass('active');
        }
      });
    })   
  }
})

$('#eui').combobox({
    panelHeight:'100px',
  groupField:'group',
  data:[{
    "value":"f20",
    "text":"Firefox 2.0 or higher",
    "group":"Firefox"
},{
    "value":"f15",
    "text":"Firefox 1.5.x",
    "group":"Firefox"
},{
    "value":"f10",
    "text":"Firefox 1.0.x",
    "group":"Firefox"
},{
    "value":"ie7",
    "text":"Microsoft Internet Explorer 7.0 or higher",
    "group":"Microsoft Internet Explorer"
},{
    "value":"ie6",
    "text":"Microsoft Internet Explorer 6.x",
    "group":"Microsoft Internet Explorer"
},{
    "value":"ie5",
    "text":"Microsoft Internet Explorer 5.x",
    "group":"Microsoft Internet Explorer"
},{
    "value":"ie4",
    "text":"Microsoft Internet Explorer 4.x",
    "group":"Microsoft Internet Explorer"
},{
    "value":"op9",
    "text":"Opera 9.0 or higher",
    "group":"Opera"
},{
    "value":"op8",
    "text":"Opera 8.x",
    "group":"Opera"
},{
    "value":"op7",
    "text":"Opera 7.x",
    "group":"Opera"
},{
    "value":"Safari",
    "text":"Safari"
},{
    "value":"Other",
    "text":"Other"
}]
 }).combobox('sticky');

Answer 1

我认为您可以仅使用JavaScript来完成此操作。

看看https://api.jquery.com/keypress/

轻松捕捉“ TAB”事件：

('yourcombo').keypress(function(e) {
    var keyCode = e.keyCode || e.which; 

    if (keyCode == 9) { //9 is key for "TAB"
        e.preventDefault(); 
        // here you select what you want
    } 
})

希望对您有所帮助。