2012-04-11 16 views
0

jQuery UIのオートコンプリート機能を使用して、結合値のパッシブデータベースを作成しています。レンズタイプ、レンズデザイン、レンズ素材の3つの入力があります。jQuery UIオートコンプリートの結果は他の入力値に依存します

3つの値はすべて自動完成型であり、フォーム入力時には、入力に固有の値がデータベースに格納されます。

私がしたいのは、前の入力の既知の入力に基づいて各入力の自動完成値を返します。したがって、レンズタイプaは、レンズ設計入力のみを有する:c、d、g。レンズの種類がbに設定されている場合、オートコンプリートはa、b、e、fを返します。

jQuery UIオートコンプリートでこれをどうすればできますか?私はすでにデータベースとサーバー側のロジックを書く方法を知っていますが、オートコンプリートのフロントエンドは困惑しています。

編集:私は使用して次のJavaスクリプトでこれを行うためのハードコードされた方法で実施してきました

:これはCakePHPの機能にURLを送信

  $('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, 
      }); 
     }); 

をに似ています

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ヘルパーとコンポーネントに書くことができます。

答えて

0

jQuery UIにはこれが用意されているとは思えません。

これらの値がすべてクライアント側にある場合は、オートコンプリートの設定時にコールバック関数を使用して「ソース」オプションにフィルタリングできます。コールバック関数では、他のオートコンプリートボックスの値を表示し、フィルタリングされたセットを返すロジックがあります。

一方、あなたがオートコンプリート値をフェッチする場合は、そこに同様のロジックを置くことができます。

関連する問題