可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a html page with an input field. Every time something is typed in this field, there is a call done to a php script with jQuery.

This php script returns a JSON with the results of a particular query based on the input field.

This works fine and I am logging the output in console.

<html>
    <head>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        var r = jQuery(function($) {
            $('#name').keyup(function() {
                var input = $('#name').val();

                var response = $.getJSON('get_names.php', {input: input});

                response.done(function (names) {
                    console.log(names);
                });
            });
        });
    </script>

    </head>

    <body>
        <div><input id="name"></div>
    </body>
</html>

The problem now is that instead of logging to console, I need to merge this with the twitter bootstrap - first example in typeahead.js, so that the json used (states in the below code) is calculated every time by the php script with the content of the field.

$(document).ready(function() {

    var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
        var matches, substringRegex;

        // an array that will be populated with substring matches
        matches = [];

        // regex used to determine if a string contains the substring `q`
        substrRegex = new RegExp(q, 'i');

        // iterate through the pool of strings and for any string that
        // contains the substring `q`, add it to the `matches` array
        $.each(strs, function(i, str) {
        if (substrRegex.test(str)) {
            // the typeahead jQuery plugin expects suggestions to a
            // JavaScript object, refer to typeahead docs for more info
            matches.push({ value: str });
        }
        });

        cb(matches);
    };
    };

    var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
        'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
        'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
        'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
        'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
    ];

    $('#the-basics .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        displayKey: 'value',
        source: substringMatcher(states)
    });
});

I have been trying to catch the value with this but nothing changes:

jQuery(function($) {
    $('#name').keyup(function() {
        var input = $('#name').val();

        names = $.getJSON('get_names.php', {input: input});

    });
});

So: how can I make the JSON be updated every time a keyup event happens, by calling the php script with the input that is written so far?

回答1:

Edit, Updated

Try

    var substringMatcher = function () {
        return function findmatches(q, cb) {
            var matches, substrRegex;

            // an array that will be populated with substring matches
            matches = [];

            // regex used to determine if a string contains the substring `q`
            substrRegex = new RegExp(q, 'i');

            // iterate through the pool of strings and for any string that
            // contains the substring `q`, add it to the `matches` array

            // do ajax stuff
            // update remote `source` here
            $.post("/echo/json/"
                  // do stuff with `q` : `input`
                , {json:JSON.stringify([states, {input:q}])})
            .then(function(json) {
                var names  = json[1];
                console.log(names);
            $.each(json[0], function (i, str) {
                if (substrRegex.test(str)) {
                    // the typeahead jQuery plugin expects suggestions to a
                    // JavaScript object, refer to typeahead docs for more info
                    matches.push({
                        value: str
                    });
                }
              });

            cb(matches);
            } // `error` handler
            , function(jqxhr, textStatus, errorThrown) {
                console.log(textStatus, errorThrown)
            }); // end of `then`
        };

    };

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas'
                 , 'California','Colorado', 'Connecticut', 'Delaware'
                 , 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois'
                 , 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana'
                 , 'Maine', 'Maryland', 'Massachusetts', 'Michigan'
                 , 'Minnesota', 'Mississippi', 'Missouri', 'Montana'
                 , 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey'
                 , 'New Mexico', 'New York', 'North Carolina', 'North Dakota'
                 , 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island'
                 , 'South Carolina', 'South Dakota', 'Tennessee', 'Texas'
                 , 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia'
                 , 'Wisconsin', 'Wyoming'];

    $('#the-basics .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'categories',
        displayKey: 'value',
        source: substringMatcher()
    });

jsfiddle http://jsfiddle.net/guest271314/96d5mzr8/16/

回答2:

What I ended up doing is to use Bloodhound and, specifically, replace to create an appropriate query:

var states = new Bloodhound({
    ...
    remote: {
            url: 'suggest.php?input=',
            replace: function (url, query) {
                    suggestion.input = query;
                    return url + suggestion.input;
            },
            ...
    }
});
states.initialize();

All together, the full code looks like this:

$(function(){

        var suggestion = {
                input: '',
                normalized: ''
        };
        var states = new Bloodhound({
                datumTokenizer: function (d){

                },
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                        url: 'get_names.php?input=',
                        replace: function (url, query) {
                                suggestion.input = query;
                                return url + suggestion.input;
                        },
                        filter: function (data) {
                                return $.map(data, function(company) { return { value: company }; });
                                }
                }
        });
        states.initialize();

        $('#the-basics .typeahead').typeahead({
                minLength: 1,
                highlight: true
                },{
                displayKey: 'value',
                source: states.ttAdapter()
        });
});