Adds search field to standard content picker

src/Umbraco.Web.UI.Client/src/common/services/search.service.js

@@ -12,6 +12,7 @@ angular.module('umbraco.services')
 					el.metaData = {treeAlias: "member"};
 					el.title = el.Fields.nodeName;
 					el.subTitle = el.Fields.email;
+					el.id = el.Id;
 				});
 
 				args.results.push({
@@ -28,6 +29,7 @@ angular.module('umbraco.services')
 					el.menuUrl = "UmbracoTrees/ContentTree/GetMenu?id=" + el.Id + "&application=content";
 					el.metaData = {treeAlias: "content"};
 					el.title = el.Fields.nodeName;
+					el.id = el.Id;
 
 					contentResource.getNiceUrl(el.Id).then(function(url){
 						el.subTitle = angular.fromJson(url);
@@ -48,6 +50,7 @@ angular.module('umbraco.services')
 					el.menuUrl = "UmbracoTrees/MediaTree/GetMenu?id=" + el.Id + "&application=media";
 					el.metaData = {treeAlias: "media"};
 					el.title = el.Fields.nodeName;
+					el.id = el.Id;
 				});
 
 				args.results.push({

src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js

@@ -1,8 +1,41 @@
 //used for the media picker dialog
 angular.module("umbraco").controller("Umbraco.Dialogs.ContentPickerController",
-	function ($scope, eventsService, $log) {	
+	function ($scope, eventsService, entityResource, searchService, $log) {	
 	var dialogOptions = $scope.$parent.dialogOptions;
 	$scope.dialogTreeEventHandler = $({});
+	$scope.results = [];
+
+	$scope.select = function(result){
+		entityResource.getById(result.id, "Document").then(function(ent){
+			if(dialogOptions && dialogOptions.multipicker){
+				
+				$scope.showSearch = false;
+				$scope.results = [];
+				$scope.term = "";
+				$scope.oldTerm = undefined;
+
+				$scope.select(ent);
+			}else{
+				$scope.submit(ent);
+			}
+		});
+	};
+
+	$scope.performSearch = function(){
+		if($scope.term){
+			if($scope.oldTerm !== $scope.term){
+				$scope.results = [];
+				searchService.searchContent({term: $scope.term, results: $scope.results});
+				$scope.showSearch = true;
+				$scope.oldTerm = $scope.term;
+			}
+		}else{
+			$scope.oldTerm = "";
+			$scope.showSearch = false;
+			$scope.results = [];
+		}
+	};
+
 
 	$scope.dialogTreeEventHandler.bind("treeNodeSelect", function(ev, args){
 		args.event.preventDefault();

src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.html

@@ -1,16 +1,49 @@
 <div class="umb-panel" ng-controller="Umbraco.Dialogs.ContentPickerController">
-	<div class="umb-panel-body no-header">
-				
-				<div class="umb-pane">
-					<umb-tree 
-						section="content" 
-						cachekey="linkpickerDialog" 
-						showheader="true" 
-						showoptions="false"
-						eventhandler="dialogTreeEventHandler">
-					</umb-tree>
-				</div>
-		
+	<div class="umb-panel-header">
+		<div class="umb-el-wrap umb-panel-buttons">
+			        <div class="form-search">
+	                    <i class="icon-search"></i>
+	                    <input type="text" 
+	                           ng-model="term" 
+	                           class="umb-search-field search-query" 
+	                           placeholder="Search..."
+	                           on-keyup="performSearch()">
+	                </div>
+	    </div>
+	</div>
+	<div class="umb-panel-body with-footer">
+		<!-- Search results -->
+		<div ng-show="showSearch">
+			<ul class="umb-tree">
+		        <li class="root">
+		            <ul class="umb-search-group" ng-repeat="resultGroup in results">
+		                <li ng-repeat="result in resultGroup.matches">
+		                    <div style="padding-left: 20px">
+		                    <a ng-class="{first:$first}" ng-click="select(result)">
+		                           <i 
+		                            class="icon umb-tree-icon sprTree {{resultGroup.icon}}"></i>
+		                            {{result.title}}
+                                    <small class="search-subtitle" ng-show="result.subTitle">
+                                        {{result.subTitle}}
+                                    </small>
+		                        </a>
+		                    </div>
+		                </li>
+		            </ul>
+
+		        </li>
+		    </ul>    
+		</div>
+
+		<div ng-hide="showSearch">
+			<umb-tree 
+				section="content" 
+				cachekey="contentpickerDialog" 
+				showheader="true" 
+				showoptions="false"
+				eventhandler="dialogTreeEventHandler">
+			</umb-tree>
+		</div>
 	</div>
 
 	<div class="umb-panel-footer" ng-show="multipicker">

src/Umbraco.Web.UI.Client/src/views/common/dialogs/memberpicker.controller.js

@@ -25,6 +25,10 @@ angular.module("umbraco").controller("Umbraco.Dialogs.MemberPickerController",
 		args.event.preventDefault();
 		args.event.stopPropagation();
 
+		if(args.node.nodetype === "member-folder"){
+			return;
+		}
+		
 		eventsService.publish("Umbraco.Dialogs.MemberPickerController.Select", args).then(function(args){
 			if(dialogOptions && dialogOptions.multipicker){
 				

src/Umbraco.Web.UI.Client/src/views/common/dialogs/memberpicker.html

@@ -35,7 +35,7 @@
 		    </ul>    
 		</div>
 
-		<div class="umb-pane" ng-hide="showSearch">
+		<div ng-hide="showSearch">
 				<umb-tree 
 				    section="member" 
                     treealias="member"