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

Question

I'm trying to implement marcopolo, which is a jquery plugin to do auto complete.

Here are my two issues.

1) If I type a single letter or any word, all values for "Direction" will appear, which is not correct. I would like, for example, if I search for "Up", any words with those two letters will appear.

2) If a user searches for "Up" and they hit enter or hit the submit button, they should be taken to the URL associated with that word.

Github reference: https://github.com/jstayton/jquery-marcopolo
Marcopolo example: http://jstayton.github.io/jquery-marcopolo/example1.html

And here's my codepen: 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');
            }
    });

});

Thanks ahead for your help!

Answer 1

问题是您正在发送带有<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"}]