javascript - 如何使用 jquery marcopolo 实现自动完成

标签 javascript jquery html css autocomplete

我正在尝试实现 marcopolo,这是一个用于自动完成的 jquery 插件。

这是我的两个问题。

1) 如果我输入单个字母或任何单词,“方向”的所有值都会出现,这是不正确的。例如,我希望如果我搜索“Up”,任何带有这两个字母的单词都会出现。

2) 如果用户搜索“Up”并按下回车键或点击提交按钮,他们应该被带到与该词关联的 URL。

Github引用:https://github.com/jstayton/jquery-marcopolo
马可波罗示例:http://jstayton.github.io/jquery-marcopolo/example1.html

这是我的代码笔:http://codepen.io/anon/pen/rrwgwJ

HTML

<input type="text" name="autoCom" id="autoCom"><input type="submit" class="send">

CSS

ol {position: absolute; top: 20px;}
ol.mp_list {list-style-type: none;}

JS

$(function(){

$('#autoCom').marcoPolo({
        url: 'https://api.myjson.com/bins/ygdk',
        minChars: 1,
        submitOnEnter: true,
            formatData: function (data) {
                return data; //possible issue
            },
        formatItem: function (data, $item) {
            return data.Direction;
            },
            onSelect: function (data, $item) {
        //window.location = data.URL;
        this.val(data.Direction);
        window.open(data.URL,'_blank');
            }
    });

});

提前感谢您的帮助!

最佳答案

问题是您正在发送带有 <input/> 内容的“q”变量。元素,但您配置为 JSON 响应的页面不会使用该“q”变量过滤任何内容,因此,您将始终获得相同的结果。

[{"Direction":"Up","URL":"http://www.google.com"},{"Direction":"Left","URL":"http://www.cnn.com"},{"Direction":"Right","URL":"http://www.engadget.com"},{"Direction":"Down","URL":"http://www.twitter.com"},{"Direction":"Upward","URL":"http://www.facebook.com"},{"Direction":"Leftwing","URL":"http://www.snapfish.com"},{"Direction":"Rightwing","URL":"http://www.gizmodo.com"},{"Direction":"Downward","URL":"http://www.fox.com"}]

关于javascript - 如何使用 jquery marcopolo 实现自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39760756/

相关文章:

jquery - 使用 Jquery 或 C# 设置浏览器模式

html - 从事件导航栏选项卡更改背景颜色

javascript - 当用户在文本字段中输入信息并单击js中的提交时,如何显示确认提示,显示已输入的内容

javascript - 为什么 "document.styleSheets"在浏览器每刷新 3 到 5 次后返回空值?

javascript - html 选择上的 MouseUp() 事件不起作用

javascript - 从 anchor 链接到达后切换 div

javascript - jQuery Dialog 总是显示在滚动条的顶部

javascript - 如何将地址栏 url 放入 href 属性中

javascript - 我如何制作此幻灯片的动画(通过更改其 src)?

JavaScript 日期模式