选择带有输入功能的框?

时间:2015-06-09 12:11:16

标签: javascript php jquery html html5

我想在html页面中选择一个选项框,从数据库中选择该选项。用户也可以输入相同的框,输入也会添加到数据库中。

我只想知道如何在两个单独的盒子里做我想做的单箱

<table>
    <tr>
        <td class="style2">Category</td>
        <td class="style2">
            <select name="category1" style="width: 123px">
                <option value="">--Select--</option>
                <?php
                    $sql = "select * from category";
                    //echo $sql;
                    $tbl = mysql_query($sql);
                    while ($row = mysql_fetch_array($tbl))
                    { ?>
                        <option value="<?php echo $row['category'];?>">
                            <?php echo $row['category'];?>
                        </option></select>
                    <?php } 
                ?>
        </td>
        <td class="style2">
            <input name="category2" type="text" />
        </td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:0)

作为一些长代码,我无法将其放在评论字段中。但你可以做这种类型。

<html>
    <head>
    </head>
    <body>
       <input type="text" id="search-box">
       <div id="results">
       </div>

       <script>
         var dbFetchedData = ["us", "india", "germany"];
         document.getElementById("search-box").onkeyup = function() {
            document.getElementById("results").innerHTML = '';
            for (var i = 0; i<dbFetchedData.length; i++) {
                if (dbFetchedData[i] == this.value) {
                    var li = document.createElement("li");
                    li.innerHTML = dbFetchedData[i];
                    document.getElementById("results").appendChild(li);
                }
            }
         }
       </script>
    </body>
</html>

这里我将获取的数据存储在javascript数组中。

您可以向li项添加eventlistners,更好的设计。您还可以优化代码。我希望你能从中得到一些想法。