README

CakePHP 2.0 插件，旨在轻松实现自动补全功能

需求

PHP 5.3
CakePHP 2.0 或更高版本

安装

从 github 克隆：在您的应用目录中输入 git clone git@github.com:krolow/Komplete.git Plugin/Komplete
从 github 下载存档并解压到 app/Plugin/Komplete

何时使用它？

自动补全功能

您可能需要多次实现一个输入的自动补全，对于前端来说，我们有几个解决方案可以很好地工作，但是在后端，我们总是需要编写这个功能。

Komplete 旨在使后端轻松实现自动补全功能。

如何实现？

它提供了一个控制器操作，以 JSON 格式响应自动补全功能，并提供了一个行为来保存输入字段中的数据。

查找现有数据
执行更新/插入
执行数据之间的关系
处理多数据
处理单数据

导入数据

导入数据总是另一个无聊的任务，我们总是需要检查数据是否已存在于数据库中。如果不存在，我们应该插入并创建关系。

使用 Komplete，您无需再关心这一点。您只需启用 Komplete，让行为处理这项任务。您传递一个字符串字段，定义要使用的数据库属性作为搜索，它将在数据库中为您查找。如果存在，将创建所需的关系；如果不存在，将插入并创建关系。

它如何工作？

作为自动补全使用

在您的模型中

<?php
App::uses('AppModel', 'Model');
/**
 * Event Model
 *
 * @property City $City
 * @property Technology $Technology
 */
class Event extends AppModel {

    public $actsAs = array(
        'Komplete.Completable' => array(
            'relations' => array(
                'Technology' => array(
                    'multiple' => true,
                    'field' => 'name',
                ),
                'City' => array(
                    'multiple' => false,
                    'field' => 'name',
                ),
            ),
            'separator' => ','
        )
    );


/**
 * belongsTo associations
 *
 * @var array
 */
    public $belongsTo = array(
        'City',
    );

/**
 * hasAndBelongsToMany associations
 *
 * @var array
 */
    public $hasAndBelongsToMany = array(
        'Technology' => array(
            'className' => 'Technology',
            'joinTable' => 'technologies_events',
            'foreignKey' => 'event_id',
            'associationForeignKey' => 'technology_id',
            'unique' => 'keepExisting',
            'conditions' => '',
            'fields' => '',
            'order' => '',
            'limit' => '',
            'offset' => '',
            'finderQuery' => '',
            'deleteQuery' => '',
            'insertQuery' => ''
        )
    );

在您的视图中

<div class="events add">
    <fieldset>
        <legend><?php echo __('Register your event'); ?></legend>
        <?php 
            echo $this->Form->create('Event', array('type' => 'file'));
            echo $this->Form->input(
                'Event.City', 
                array(
                    'type' => 'text', 
                    'class' => 'komplete input-xlarge',
                    'data-multiple' => false,
                    'data-link' => $this->Html->url(
                        array(
                            'controller' => 'complete',
                            'action' => 'search',
                            'plugin' => 'komplete',
                            'Event',
                            'City',
                            'ext' => 'json'
                        ),
                        true
                    )
                )
            );
            echo $this->Form->input(
                'Event.Technology', 
                array(
                    'type' => 'text',
                    'class' => 'komplete input-xlarge',
                    'data-multiple' => true,
                    'data-link' => $this->Html->url(
                        array(
                            'controller' => 'complete',
                            'action' => 'search',
                            'plugin' => 'komplete',
                            'Event',
                            'Technology',
                            'ext' => 'json'
                        ),
                        true
                    )
                )
            );
        ?>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary"><?php echo __('Submit'); ?></button>
            <button type="button" class="btn"><?php echo __('Cancel'); ?></button>
        </div>
        </form>
    </fieldset>
</div>
<?php
    $this->Html->script(
        array(
            '/js/autocomplete.js',
        ),
        array(
            'inline' => false
        )
    );
?>

JavaScript 示例，在这种情况下使用 github 的 bootstrap 和 jQuery

$(document).ready(function () {

    $('.komplete').typeahead({
        source : function (query, process) {

            var multiple = $(this)[0].$element[0].dataset.multiple;

            if (multiple) {
                query = $.trim(query.split(',').pop());
            }

            $.getJSON(
                $(this)[0].$element[0].dataset.link, 
                {search : query},
                function (data) {
                    process(data.options);
                }
            );
        },
        updater : function (item) {
            var field = $($(this)[0].$element[0]);
            var previous_items = field.val();
            var terms = previous_items.split(',');
            terms.pop();
            terms.push(item);
            $.each(terms, function(idx, val) { terms[idx] = $.trim(val); });

            return terms.join(', ');            
        },
        matcher: function() { return true; },
        autoselect: false,

        highlighter : function (item) {
            var terms = this.query.split(',');
            var query = $.trim(terms.pop(-1))
            return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                return '<strong>' + match + '</strong>'
            });
        }
    });

});

用于导入