将jquery ui自动完成与从服务器加载的选择框集成

时间:2017-07-12 19:47:04

标签: php jquery html mysql jquery-ui

我有一个从数据库中加载<select>框的页面

HTML

                <form>                      
                        <?php
                            echo get_list_of_clients_in_option_tag();
                        ?>

                </form>

PHP

function get_list_of_clients_in_option_tag(){
    $doinmysql = "SELECT id, full_name, company FROM clients";

    $clients = mysql_query($doinmysql) 
    or die("ERROR WHILE TRYING TO GET LIST OF CLIENTS general_functions.php ON get_list_of_clients. \n\r sql query: $doinmysql");

    $return = "<select name='clientID' id='client' class='saveData blue'>";
    while($this_row = mysql_fetch_array($clients)){
        $return .= "<option value='".$this_row['id']."'>";
        $return .=  $this_row['full_name']." - ".$this_row['company'];
        $return .= "</option>";
    }
    $return .= "</select>";
    return $return;
}

而不是<select>框,我宁愿有一个<input type="text">框,您可以将其用作自动填写客户名称的搜索栏,以防有太多客户端进行手动搜索列表中的客户名称。 我更喜欢使用JQuery UI的“自动完成”小部件,但要使用它,你需要为你的选项添加源代码 - 例如:

HTML

<input type="text" id="list_of_clients_search" />

JAVASCRIPT

<script>
     $(function() {
        var availableTutorials  =  [
           " ActionScript",
           " Boostrap",
           " C",
           " C++",
        ];
        $( "#list_of_clients_search" ).autocomplete({
           source: availableTutorials
        });
     });
  </script>

(你可以看到一个有效的例子here

您能以某种方式获取<option><select>的值并将其用作source: ......的列表吗?  甚至将线索直接从数据库传输到source

0 个答案:

没有答案