✨ Added search

assets/css/relationship.css

@@ -58,6 +58,10 @@
 	background-color: #f7f7f7;
 }
 
+.relationship-list--available li[aria-hidden="true"] {
+	display: none;
+}
+
 .relationship-list--available button {
 	display: block;
 	width: 100%;
@@ -127,3 +131,21 @@
 .relationship-list--selected li .icon-left {
 	color: #ccc;
 }
+
+/* Search input: */
+.relationship-search {
+	position: relative;
+}
+
+.relationship-search .input {
+	padding-left: 2.5em;
+	margin-bottom: -2px; /* Prevent double borders */
+}
+
+.relationship-search .icon {
+	position: absolute;
+	top: calc(50% - 0.5em);
+	left: 2px;
+	width: 3em;
+	color: #777;
+}

assets/js/relationship.js

@@ -7,6 +7,10 @@
 		var $list_selected = $(field).find('.relationship-list--selected');
 		var $list_unselected = $(field).find('.relationship-list--unselected');
 
+		// Get references to search elements:
+		var $search_input = $(field).find('.relationship-search input');
+		var $search_items = $list_available.find('li');
+
 		/**
 		 * Add an item to the selection on click:
 		 */
@@ -77,6 +81,24 @@
 				ui.item.find('input').trigger('change');
 			}
 		});
+
+		/**
+		 * Search the list when typing in the search input field:
+		 */
+		$search_input.on('input', function() {
+			var search_term = $(this).val().toLowerCase();
+
+			$search_items.each(function() {
+				if ($(this).data('search-index').indexOf(search_term) > -1) {
+					$(this).attr('aria-hidden', false);
+				} else {
+					$(this).attr('aria-hidden', true);
+				}
+			});
+
+			// Scroll to top:
+			$list_available.scrollTop(0);
+		});
 	};
 
 	/**

changelog.md

@@ -1,4 +1,7 @@
 # Changelog
 
+## 1.1.0 (2017-08-17)
+- Added search
+
 ## 1.0.0 (2017-08-11)
 - Initial version

package.json

@@ -2,7 +2,7 @@
 	"name": "relationship",
 	"description": "Sortable multiselect field for Kirby 2 CMS",
 	"author": "Ola Christensson <ola.christensson@grandpublic.se>",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"type": "kirby-field",
 	"license": "MIT",
 	"repository": {

readme.md

@@ -81,6 +81,19 @@ related:
 
 ## Extra features
 
+### Search:
+To enable search, add `search: true` to the field settings in your blueprint.
+
+```yaml
+related:
+  label: Related articles
+  type: relationship
+  options: query
+  query:
+    fetch: siblings
+  search: true
+```
+
 ### Controller:
 This field is extended with an option to use a user specified function to have even more control of the options that will be loaded. The idea is taken from the [Controlled List plugin](https://github.com/rasteiner/controlledlist).
 

relationship.php

@@ -3,6 +3,7 @@
 class RelationshipField extends CheckboxesField {
 
 	public $controller;
+	public $search;
 
 	static public $assets = array(
 		'js' => array(

template.php

@@ -18,10 +18,17 @@
 <div class="field-content">
 	<div class="relationship-field" data-field="relationship">
 
+		<?php if ($field->search()): ?>
+		<div class="relationship-search">
+			<i class="icon fa fa-search"></i>
+			<input class="input" type="text" />
+		</div>
+		<?php endif ?>
+
 		<div class="relationship-lists">
 			<ul class="relationship-list relationship-list--available">
 				<?php foreach ($all_options as $key => $value): ?>
-					<li>
+					<li<?php e($field->search(), ' data-search-index="' . mb_strtolower($value) . '"') ?>>
 						<button type="button" data-key="<?php echo $key; ?>"<?php e(array_key_exists($key, $selected_options), ' disabled') ?> aria-label="<?php echo i18n('add') ?> <?php echo $value ?>">
 							<?php echo $value ?>
 							<span class="icon-add" aria-hidden="true">