Question

我正在使用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帮助器和组件。

Answer 1

我认为jQuery UI没有提供任何开箱即用的功能。

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

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

jQuery UI自动完成结果取决于其他输入值

1 个答案: