php mysqli JSON選擇框

Question

我製作了一個帶有groupopt的選擇框/組合框，它使主區位於頂部，而底層區位於其下。它工作正常，但我想要什麼，而我輸入AB包含AB的列表會來，但我想，當我按TAB時，第一個項目或包含AB的項目將被選中。

請大家幫忙。

代碼是如下：

DEMO：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 
    } 
}) 

希望它能幫助。