Question

我正在寻找一个允许我模板自动填充框下拉列表的库。我将在json中返回数据。

Answer 1

我猜你不喜欢jQuery-autocomplete的输出HTML？

如何使用jQuery templates？

例如：

模板：

<script id="tmplDropDown" type="text/x-jquery-tmpl">
<div>
    <select name="${ClassName}">
    {{each Options}}
        <option value="${Id}">${Name}</option>
    {{/each}}
    </select>
</div>
</script>

JavaScript / HTML：

<input type="text" class="sample">
<div id="results"></div>

<script>

$(function(){
   //bind on the textbox's keyup event.
   $('.sample').keyup(function(){  
       var value = $(this).val(); 

       //sample data, but normally do your server call here for json data with $.ajax
       var data = {
           "ClassName" : "example",
           "Options": [
               { "Id" :1, "Name" : "Stack"},
               { "Id" :2, "Name" : "Overflow"}
           ]
       };

       var $dropdown = $('#tmplDropDown').tmpl(data);
       $('#results').empty().append($dropdown);
});
</script>

而且，ofcoz，您可以将“选择”/“选项”更改为“ul”/“li”或设计师喜欢的任何内容：）

Answer 2

我真的建议Jquery UI - Autocomplete。

Answer 3

我不知道这是否仍然相关，只是为了完整性添加它：原始的独立jQuery自动完成插件仍然存在（并积极开发）：

http://code.google.com/p/jquery-autocomplete/

Answer 4

以下是我如何使其工作的代码使用每个功能，也可以使用多个字段。

$('#query').each(function(i, el) {
    el = $(el);
    el.autocomplete({

        // get source using ajax function
        // If you need to send extra parameters to parts_by_partno.php
        // use data: {}
        source: function(request, response) {
            $.ajax({
                type: 'GET',
                url: 'parts_by_partno.php',

                // when you type word in text field
                // el.val() gets a word and ajax sends value of el.val() to server
                data: {id: el.attr('id'), term: el.val()},

                success: function(data) {
                    //data - data returned from server
                    response(data);
                },
                dataType:"json"
            })
        }
    });
});

PHP中的

=================== ===================

$ sendArray = array（）;

$query = "SELECT * FROM ".$table." WHERE name LIKE '".$_GET['term']."%' LIMIT 10"

while($row=mysql_fetch_array(mysql_query($query)){

  array_push($sendArray, $row['name']);

};

echo json_encode($sendArray);

Jquery自动完成与模板

4 个答案: