如何使用 jquery UI 自动完成 1.8.4？答案

【问题标题】：how to use jquery UI autocomplete 1.8.4?如何使用 jquery UI 自动完成 1.8.4？
【发布时间】：2010-09-13 02:03:39
【问题描述】：

我想显示类似的建议 STREET NAME > CITY > COUNTRY （我从服务器获取的 json 中的 4 个不同的变量街道、城市、国家、网址）当我选择一个时，它会像链接一样转到 url 并将突出显示我在建议中找到的字母我该怎么做？这是我的代码

<script type="text/javascript">
    $('#search').autocomplete({
        source: function(req, add){  

            //pass request to server  
            $.getJSON("suggest.php?callback=?", req, function(data) {  

                //create array for response objects  
                var suggestions = [];  

                //process response  
                $.each(data, function(i, val){  
                suggestions.push(val.lable+' '+val.value+' '+val.both);  
            });  

            //pass array to callback  
            add(suggestions);  
            });  
        },  
        select: function(e, ui) {
        $('#search').val(ui.item.lable);
        },
        width: 300,
        max: 10,
        delay: 50,
        minLength: 1,
        scroll: false,
        highlightItem: true
      });
    </script>

服务器响应

([{"lable":"apartamentos mojácar beach","value":"mojacar","both":"spain"},{"lable":"hotel mandakini grand","value":"new delhi","both":"india"},{"lable":"hotel sol y mar sharming inn","value":"sharm el sheikh","both":"egypt"},{"lable":"la quinta inn and suites sarasota","value":"sarasota","both":"usa"},{"lable":"ocean sand golf and beach resort","value":"punta cana","both":"dominican republic"},{"lable":"rooms barcelona","value":"barcelona","both":"spain"},{"lable":"villa maroc essaouira","value":"essaouira","both":"morocco"},{"lable":" il casale farmhouse with panoramic swimming poo","value":"bettona","both":"italy"},{"lable":" shelley's ","value":"lynton","both":"united kingdom"},{"lable":" 1 melrose blvd by seasons in africa","value":"johannesburg","both":"south africa"}]);

我知道问题出在自动完成的“SELECT”和“SOURCE”字段中，但我不知道如何使用它。如何解析响应以便它可以工作。它仅适用于一个字段，但不适用于 4 个字段（vars）

////////////////////

好的，现在我可以从服务器获取 3 个病毒，我将它们添加到源代码中。但我不能一直只选择一个，它会选择所有字符串！我该怎么办？

【问题讨论】：

标签： javascript jquery user-interface autocomplete

【解决方案1】：

如果你想使用 jquery ui 自动完成，你的数据必须是“一个简单的字符串数组，或者它包含数组中每个项目的对象，具有标签或值属性或两者兼而有之”。这是来自http://jqueryui.com/demos/autocomplete/ 的文档

您的服务器响应不符合预期的数据类型，您应该修改Suggest.php，将数据后处理为标签-值对。

据我了解，您还希望在从自动完成中选择项目时执行自定义操作，因此您还应该为“选择”事件添加一个处理程序。

【讨论】：

源现在可以工作，但选择不工作。看我添加代码的问题
在 SELECT 属性中，我只能抓取我在源中创建的字符串，我从 3 个变量创建的字符串，我想知道我是否可以选择每个变量，例如我想搜索“HIL”并获得 HILTON LOS ANGELES USA 建议，当我选择它时，它只会显示“HILTON”，有办法解决吗？
您可以在返回对象的“value”属性中隔离您想要的变量，如文档中所述。对于您的示例，对象可以是 { "label" : "HILTON LOS ANGELES USA", "value" : "HILTON" }

【解决方案2】：

我不明白。您的代码以什么方式不起作用？ Suggest.php 是什么样的？如果Suggest.php 是您希望的格式的字符串列表，它应该可以正常工作。

【讨论】：

您的“答案”应该是对该问题的评论。
我添加服务器响应问题。