如何创建使用jQuery自动补全功能的多个相关输入字段?

时间:2016-01-09 作者:Christy

我正在尝试创建一个表单,允许用户在我的设备分类广告网站的正面添加一个新列表。我使用名为listing\\u taxonomy的自定义分类法设置了一个自定义帖子类型。分类法是分层的,而且相当深入。

我想在一个表单中显示4个下拉输入字段,该表单将使用自定义分类法的父级或子级自动完成。这些字段将是make、category、class和model。每个字段都需要依赖于表单中的前一个字段。

例如,如果用户选择make JohnDeere,则下一个输入字段将进入父项JohnDeere的所有子项。等等

到目前为止,我已经做了几次不成功的尝试。请有人给我指引正确的方向!如果您解释我如何可能将用户输入的新术语添加到我的分类法中的正确位置,则可以获得额外的分数。我将在下面附上相关代码。如果需要更多信息,请告诉我。谢谢

PHP和Javascript函数:

link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<?php 

$cns_make = array(
    \'orderby\'                => \'name\',
    \'order\'                  => \'ASC\',
    \'hide_empty\'             => false,
    \'include\'                => array(),
    \'exclude\'                => array(),
    \'exclude_tree\'           => array(),
    \'number\'                 => \'\',
    \'offset\'                 => \'\',
    \'fields\'                 => \'names\',
    \'name\'                   => \'\',
    \'slug\'                   => \'\',
    \'hierarchical\'           => true,
    \'search\'                 => \'\',
    \'name__like\'             => \'\',
    \'description__like\'      => \'\',
    \'pad_counts\'             => false,
    \'get\'                    => \'\',
    \'parent\'                 => \'0\',
    \'childless\'              => false,
    \'cache_domain\'           => \'core\',
    \'update_term_meta_cache\' => true,
    \'meta_query\'             => \'\'
);
$makeArray = get_terms( \'listing_taxonomy\', $cns_make );

$cns_cat = array(
    \'orderby\'                => \'name\',
    \'order\'                  => \'ASC\',
    \'hide_empty\'             => false,
    \'include\'                => array(),
    \'exclude\'                => array(),
    \'exclude_tree\'           => array(),
    \'number\'                 => \'\',
    \'offset\'                 => \'\',
    \'fields\'                 => \'names\',
    \'name\'                   => \'\',
    \'slug\'                   => \'\',
    \'hierarchical\'           => true,
    \'search\'                 => \'\',
    \'name__like\'             => \'\',
    \'description__like\'      => \'\',
    \'pad_counts\'             => false,
    \'get\'                    => \'\',
    \'parent\'                 => \'0\',
    \'childless\'              => false,
    \'cache_domain\'           => \'core\',
    \'update_term_meta_cache\' => true,
    \'meta_query\'             => \'\'
);
$catArray = get_terms( \'listing_taxonomy\', $cns_cat );
?>
<script>
    $(function() {
    var availableTags = <?php echo json_encode($makeArray); ?>;
    $( "#cns-make" ).autocomplete({
      source: availableTags
    });
    });

    $(function() {
    var availableTags = <?php echo json_encode($catArray); ?>;
    $( "#cns-category" ).autocomplete({
      source: availableTags
    });
    });

</script>
表单代码:

                <form method="POST" action="">
                    <div class="meta-row">
                        <div class="meta-th">
                            <label for="listing-make" class="cns-row-title">Make</label> 
                        </div>
                        <div class="meta-td">
                           <input id="cns-make" name="listing_make">
                        </div>
                    </div>
                    <div class="meta-row">
                        <div class="meta-th">
                            <label for="listing-class" class="cns-row-title">Category</label> 
                        </div>
                        <div class="meta-td">
                            <input id="cns-category" >
                        </div>
                    </div>

                    <div class="meta-row">
                        <input type="button" value="Save Listing" onclick="cns_save_new_listing()">
                    </div>
                </form>

EDIT: to include David\'s solution.

新脚本代码:

<?php 

$cns_make = array(
    \'orderby\'                => \'name\',
    \'order\'                  => \'ASC\',
    \'hide_empty\'             => false,
    \'include\'                => array(),
    \'exclude\'                => array(),
    \'exclude_tree\'           => array(),
    \'number\'                 => \'\',
    \'offset\'                 => \'\',
    \'fields\'                 => \'names\',
    \'name\'                   => \'\',
    \'slug\'                   => \'\',
    \'hierarchical\'           => true,
    \'search\'                 => \'\',
    \'name__like\'             => \'\',
    \'description__like\'      => \'\',
    \'pad_counts\'             => false,
    \'get\'                    => \'\',
    \'parent\'                 => \'0\',
    \'childless\'              => false,
    \'cache_domain\'           => \'core\',
    \'update_term_meta_cache\' => true,
    \'meta_query\'             => \'\'
);
$makeArray = get_terms( \'listing_taxonomy\', $cns_make );

$cns_cat = array(
    \'orderby\'                => \'name\',
    \'order\'                  => \'ASC\',
    \'hide_empty\'             => false,
    \'include\'                => array(),
    \'exclude\'                => array(),
    \'exclude_tree\'           => array(),
    \'number\'                 => \'\',
    \'offset\'                 => \'\',
    \'fields\'                 => \'names\',
    \'name\'                   => \'\',
    \'slug\'                   => \'\',
    \'hierarchical\'           => true,
    \'search\'                 => \'\',
    \'name__like\'             => \'\',
    \'description__like\'      => \'\',
    \'pad_counts\'             => false,
    \'get\'                    => \'\',
    \'parent\'                 => \'0\',
    \'childless\'              => false,
    \'cache_domain\'           => \'core\',
    \'update_term_meta_cache\' => true,
    \'meta_query\'             => \'\'
);
$catArray = get_terms( \'listing_taxonomy\', $cns_cat );
?>
<script>
    $(function() {
    var availableTags = <?php echo json_encode($makeArray); ?>;
    jQuery( "#cns-make" ).autocomplete({
        source: availableTags,
        select: function (event, ui) {
            var data = new FormData();
            var value = ui.item.value;
            data.append( \'action\', \'your_function\' );
            data.append( \'varname\', value );
            jQuery.ajax({
                url: ajax_url,
                type: \'POST\',
                data: data,
                success: function( response ) { // response is a json string returned from your_function
                    var availableCats = <?php echo json_encode($catArray); ?>;
                    jQuery( "#cns-category" ).autocomplete( \'option\', \'source\', availableCats );
                    }
                })
            }
        });
    });
</script>
新表单代码:

<div class="meta-row">
    <div class="meta-th">
        <label for="listing-make" class="cns-row-title">Make</label> 
    </div>
    <div class="meta-td">
       <input id="cns-make" name="listing_make" value="">

    </div>
</div>
<div class="meta-row">
    <div class="meta-th">
        <label for="listing-class" class="cns-row-title">Category</label> 
    </div>
    <div class="meta-td">
        <input id="cns-category" name="listing_category" value="">
    </div>
</div>

1 个回复
SO网友:David Clough

将自动完成“选择”捕获添加到第一个自动完成字段。使用此选项可从自动完成中获取所选值。使用Ajax调用根据所选值获取下一个自动完成源,并将新源应用于下一个自动完成字段。

jQuery( "#cns-make" ).autocomplete({
    source: availableTags,
    select: function (event, ui) {
        var data = new FormData();
        var value = ui.item.value;
        data.append( \'action\', \'your_function\' );
        data.append( \'varname\', value );
        jQuery.ajax({
            url: ajax_url,
            type: \'POST\',
            data: data,
            success: function( response ) { // response is a json string returned from your_function
                jQuery( "#cns-category" ).autocomplete( \'option\', \'source\', response );
            }
        })
    }
});

Reference