如何将从jquery ajax请求接收的对象显示给datalist

时间:2017-06-26 14:59:55

标签: jquery

在我的应用程序中,我希望显示另一种形式,在发布另一种形式后反映,然后另一种形式,但在一次ajax请求后我无法做到这一点。我的bindevent1函数不起作用。

 <div class="brands">
        <div class="brand-form">
            <form id="brand-selection" action="index.php" method="post">
            <input type="text" placeholder="type your brand name" name="brandList" list="brandList">
            <datalist id="brandList">
                <?php
                foreach($results as $result){
                    $name = $result->brand_name;
                    echo "<option value=$name>";
                    echo $name;
                }?>
            </datalist>
                <button id="brand-selection-button" class="btn-search" type="submit">Go!</button>
            </form>
        </div>
        <div class="models">
        <?php   
        if(isset($_POST['brandList'])){?>
            <form id="model-selection" action="index.php" method="post">
                <li><input type="text" name="modelList" list="modelList"></li>
                    <datalist id="modelList">
                        <?php 
                            foreach($models as $model){
                                $name = $model->model_name;
                                $id = $model->model_id;
                                echo "<option value=$name>";
                            }?>
                    </datalist>
                 <button id="model-selection-button" class="btn-search" type="submit">Go!</button>   
            </form>
            <?php }?>
        </div>
        <div id ="not-found" style="display:none;">
            <form id="model-selection" action="home.php" method="post">
                <input type="text" name="modelList" list="modelList">
            </form>
        </div>
    </div>
    <div class="models">
        <script id="model_list_template" type="text/x-handlebars-template">
            <form id="model-selection" action="index.php" method="post">
            <input type="text" name="modelList" placeholder="model name" list="modelList">
                <datalist id="modelList">
                {{#each this}}
                    <option value={{modelName this}}></option>
                {{/each}}
                </datalist>
                <button id="model-selection-button" class="btn-search" type="submit">Go!</button> 
            </form> 
        </script>
    </div>

我的jquery脚本

    var Brand = {
    init: function(config){
        this.config = config;
        this.bindEvents1();
        this.bindEvents2();
        this.setupTemplate();
        $('#brand-selection-button').remove();
        $('.not-found').hide();
        },
    bindEvents2: function(){
        this.config.selection1.on('input',this.fetchModels);
        //this.config.selection.on('change',this.fetchModels);
    },
    bindEvents1: function(){
        this.config.selection2.on('input',function(){
            console.log('clicked');
        });
    },
    setupTemplate: function(){
        this.config.modelTemplate = Handlebars.compile(this.config.modelTemplate);
        Handlebars.registerHelper('modelName', function(models){
            modelName = models.model_name;
            console.log(modelName);
            return modelName

        });
    },
    fetchModels: function(){
        //console.log(Brand.config.form1.serialize());
        var self = Brand;
        $.ajax({
            url: 'index.php',
            type: 'POST',
            data: self.config.form1.serialize(),
            dataType: 'JSON',
            success: function(results){
                self.config.modelList.empty();
                if(results[0]){
                    self.config.modelList.append(self.config.modelTemplate(results));
                    return this;
                }else{

                    self.config.modelList.append(self.config.notFound);
                    //console.log(results[0]);
                }

            }
        });
    },
}

Brand.init({
    selection1: $("input[name='brandList']"),
    selection2: $("input[name='modelList']"),
    form1: $('#brand-selection'),
    form2: $('#model-selection'),
    modelTemplate: $('#model_list_template').html(),
    modelList: $('div.models'),
    notFound: $('#not-found'),
    list: $('#modelList')
});`

0 个答案:

没有答案