0

我正在使用 jQuery UI 的自动完成功能来创建关联值的被动数据库。我有三个输入：镜头类型、镜头设计和镜头材料。

所有三个值都是自动完成的，并且在表单提交时，如果这些输入存在唯一的值，它们将存储在数据库中。

我想要做的是根据前一个输入的已知输入为每个输入返回自动完成值。因此，例如镜头类型 a 只有镜头设计输入：c、d、g。如果镜头类型设置为 b，那么自动完成将返回 a,b,e,f。

我将如何使用 jQuery UI 自动完成来做到这一点？我已经知道如何编写数据库和服务器端逻辑，但自动完成前端却被难住了。

编辑： 我已经通过使用以下java脚本制定了一个硬编码的方法：

            $('input.autocompleteme').each( function() {
            var $input = $(this);
            $input.autocomplete({ 
                source: function( request, response ) {

                    var fieldName = $input.attr('id');

                    if ( fieldName.indexOf( "Right" ) !== -1 ) {
                        var lensSide = "Right";
                    }else{
                        var lensSide = "Left";
                    }

                    var LensType = $("#" + "Patient" + lensSide + "EyeLensType").attr("value");
                    var LensDesign = $("#" + "Patient" + lensSide + "EyeLensDesign").attr("value");
                    var LensMaterial = $("#" + "Patient" + lensSide + "EyeLensMaterial").attr("value");
                    var LensCoating = $("#" + "Patient" + lensSide + "EyeLensCoating").attr("value");
                    var LensTints = $("#" + "Patient" + lensSide + "EyeLensTints").attr("value");

                    var serverUrl = "/autocomplete.json?field=" + fieldName + "&LensType=" + LensType + "&LensDesign=" + LensDesign + "&LensMaterial=" + LensMaterial + "&LensCoating=" + LensCoating + "&LensTints=" + LensTints;
                    var term = request.term;

                    lastXhr = $.getJSON( serverUrl, request, function( data, status, xhr ) {
                        response( data );
                    });
                },
                minLength: 2, 
            });
        });

这会向 cakephp 函数提交一个 url，该函数类似于：

    function admin_autocomplete(){
    Controller::loadModel('AutoField');

    $param      = $this->params["url"]["term"];
    $fieldName  = $this->params["url"]["field"];
    $hasParent  = false;
    $output     = array();

    if ($param == ''){
        $this->set("output", NULL);
        return;
    }

    switch ($fieldName){

        case "PatientRightEyeLensType":
        case "PatientLeftEyeLensType":
            $fieldName = "LensType";
        break;

        case "PatientRightEyeLensDesign":
        case "PatientLeftEyeLensDesign":
            $fieldName = "LensDesign";
            $hasParent = "LensType";
        break;

        case "PatientRightEyeLensMaterial":
        case "PatientleftEyeLensMaterial":
            $fieldName = "LensMaterial";
            $hasParent = "LensDesign";
        break;

        case "PatientRightEyeLensCoating":
        case "PatientLeftEyeLensCoating":
            $fieldName = "LensCoating";
            $hasParent = "LensMaterial";
        break;

        case "PatientRightEyeLensTints":
        case "PatientLeftEyeLensTints":
            $fieldName = "LensTints";
            $hasParent = "LensCoating";
        break;

        default:
            die("Field Name is not known");
        break;
    }

    if ($hasParent === false){ // This is the root of the tree.

        $query = array(
            "conditions" => array(
                "type" => $fieldName,
                "parent_id" => NULL,
                "value REGEXP '^$param'"
            ),
            "fields" => array(
                "value"
            ),
        );

        $results = $this->AutoField->find("all", $query);

    }else{

        $parentValue = $this->params["url"][$hasParent];
        $query = array(
            "conditions" => array(
                "type" => $hasParent,
                "value" => $parentValue,
            ),
            "fields" => array(
                "id",
            )
        );

        $results = $this->AutoField->find("all", $query);
        $parentIds = "";
        foreach ($results as $parentId){
            $parentIds .= $parentId["AutoField"]["id"] . ",";
        }

        $parentIds = substr_replace($parentIds ,"",-1);

        $query = array(
            "conditions" => array(
                "type" => $fieldName,
                "parent_id IN ($parentIds)",
                "value REGEXP '^$param'"
            ),
            "fields" => array(
                "value"
            ),
        );

        $results = $this->AutoField->find("all", $query);

    }

    foreach ($results as $result){
        $output[] = $result["AutoField"]["value"];
    }

    $this->set("output", $output); 

}

我的 Mysql 数据库如下所示：

--
-- Table structure for table `auto_fields`
--

CREATE TABLE IF NOT EXISTS `auto_fields` (
  `id` int(11) unsigned NOT NULL auto_increment,
  `created` datetime default NULL,
  `modified` datetime default NULL,
  `parent_id` int(11) default NULL,
  `type` varchar(100) default NULL,
  `value` varchar(150) default NULL,
  `count` int(11) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `auto_fields`
--

INSERT INTO `auto_fields` (`id`, `created`, `modified`, `parent_id`, `type`, `value`, `count`) VALUES
(1, '2012-04-12 10:51:00', '2012-04-12 10:51:02', NULL, 'LensType', 'Progressive', 0),
(2, '2012-04-12 10:51:00', '2012-04-12 10:51:00', NULL, 'LensType', 'Bifocal', 0),
(3, '2012-04-12 11:55:46', '2012-04-12 11:55:46', 1, 'LensDesign', 'AAA', 0),
(4, '2012-04-12 11:55:46', '2012-04-12 11:55:46', 1, 'LensDesign', 'BBB', 0);

我确信拥有比我更好的 Javascript 技能的人能够编写 UI 交互的那一侧，这样就不需要对继承变量进行硬编码。

对我来说，这可以按预期工作，继承由 php 函数中的开关映射。如果我能弄清楚 javascript 前端，我可以将其写入 cakephp 帮助程序和组件。

4

1 回答 1

0

我认为 jQuery UI 没有为此提供任何开箱即用的东西。

如果您在客户端拥有所有这些值，则可以在设置自动完成时使用“源”选项的回调函数进行过滤。在回调函数中，您将有逻辑查看其他自动完成框中的值，然后返回过滤后的集合。

另一方面，如果您在 上获取自动完成值，则可以在那里放置类似的逻辑。

于 2012-04-11T01:19:33.110 回答