首页 > 解决方案 > 像谷歌插件这样的自动完成功能不起作用(Jquery)

问题描述

我正在尝试将此插件用于 Jquery,但是从数据库中获取数据的远程选项,我无法工作。

https://xdsoft.net/jqplugins/autocomplete/

自动完成功能很好地调用了远程 url teste_search.asp,但我不知道在这个页面上我是否需要像这样格式化数据:

['produto abc', 'produto xyz', 'produto 123']

或者像这样:

[
  {
    "title": "Cuba Gold Masculino Eau de Toilette 100ml"
  },
  {
    "title": "Cuba Jungle Zebra Feminino Eau de Parfum 100ml"
  },
  {
    "title": "Cuba Blue Masculino Eau de Toilette 100ml"
  }
]

这是我的代码:

<div class="input-group" style="margin:20px 0px;">
    <input type="text" class="form-control" id="remote_input" placeholder="Enter movie">
</div>
$(function() {
    $("#remote_input").autocomplete({
        minLength: 3,
        limit: 5,
        source : [
            function(q,add){
                $.getJSON("../../../teste_search.asp?q=" + q, function(resp) {
                    add(resp);
                })
        }],  
    });
});

所以我不知道问题出在这个函数上还是数据格式上......

标签: jqueryautocomplete

解决方案


我能够使用下面的函数和 json 数据源来解决这个问题:

$('#remote_input').autocomplete({
valueKey:'title',
accents:true,
replaceAccentsForRemote: true,
source:[{
    url:"https://www.example.com/teste2/teste_search2.asp?q=%QUERY% ",
    type:'remote',
    getValueFromItem:function(item){
        return item.title
    },
    ajax:{
        dataType : 'json'   
    }
}]});

重要:Datatype需要json改为jsonp


推荐阅读