带有模板的jQuery自动完成功能答案

【问题标题】：Jquery autocomplete with template带有模板的jQuery自动完成功能
【发布时间】：2011-01-28 16:18:06
【问题描述】：

我正在寻找一个库，它允许我对自动完成框的下拉列表进行模板化。我会以 json 格式返回数据。

【问题讨论】：

模板是什么意思？如为 XML Schemas 指定一种 XSD，但为 JS 指定？
我想在html中设计下拉列表，以便正确分配json。
类似于使用jTemplate的东西：stackoverflow.com/questions/2946949/…
看看我的回答 stackoverflow.com/questions/4556561/… 并忽略 MVC 部分。我就是这么做的。

标签： jquery

【解决方案1】：

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

使用jQuerytemplates怎么样？

例如：

模板：

<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，您可以将“select”/“option”更改为“ul”/“li”或设计师喜欢的任何内容：)

【讨论】：

这个我不明白，<input type="text" />在哪里？
已编辑，看看是否更有意义。

【解决方案2】：

我真的建议Jquery UI - Autocomplete。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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 = 数组();

$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);

【讨论】：