search for user name is available

css/workspace.css

 	width:calc(100% - 130px);
 }
 
-#step1{
+#step1, #step2, #step3, #changeaddr{
 	width: 110px; 
 	float:right;
 }
 	color: red;
 	
 }
+
 div.verification, div.details, div.success {
-	height:100px; 
-	background:lightgrey; 
+	min-height:150px; 
+	background:#f3f3f3; 
 	margin-top:10px; 
 	margin-bottom:10px;
-	color:white;
+	color: black;
+}
+
+input.fullwidth{
+	width:100%;
+}
+
+table.details {
+  border: 1px solid #FFFFFF;
+  text-align: center;
+  border-collapse: collapse;
+}
+table.details td, table.details th {
+  border: 3px solid #FFFFFF;
+  padding: 13px 2px;
+}
+
+table.details td.left, table.details th.left {
+  text-align:left;
+}
+textarea.addr{
+	padding-top:15px;
+	min-height: 100px;
+	font-weight: bold;
+	color: blue;
+	resize: none;
 }
 </style>

html/workspace.html

+<input id="username" class="typeahead" type=text name="user" placeholder="input name">
+<button id="step1" class=disabled> Search </button>
+<div id="errUserName"> abcdefg </div>
 
+<div class= 'clear'></div>
 
-<input id="username" type=text name="user" placeholder="input name">
-<button id="step1"> next </button>
-<div id="errUserName"> abcdefg </div>
-<div class="verification"> 
-verification 
+<div class="verification" id="userpass"> 
+	<div>  Mobile Phone last 4 digits: </div>
+	<div> <input class='fullwidth' id="phone" type=text> </div> 
+	<div> Postal Code: </div>
+	<div><input class='fullwidth' id="zipcode" type=text></div>
+	<button id="step2"> Verify</button>
 </div>
 
 <div class="details"> 
-details 
+<table class="details">
+<tr><td colspan=2>
+	<span>Postal Address</span> <br>
+	<textarea class=addr>
+		33 Valerie Ave
+		Baulk Ham Hills,
+		NSW, Australia 2153
+	</textarea>
+	<button id=changeaddr>Change Address</button>
+</td></tr>
+
+
+<tr>
+	<td>Delivery:</td>
+	<td class="left"> 
+		<input type=radio name="delivery"> Direct Post <br>
+		<input type=radio name="delivery" checked> Pickup from <span id=collector> Patrick Sun </span> 
+	</td>
+
+</tr>
+
+<tr>
+	<td style="vertical-align:middle">
+		<input id="medal" type=checkbox checked><br>
+		<label for="medal"> uncheck = 放弃</label>
+	</td>
+	<td >
+		<img src="https://via.placeholder.com/150" >
+	</td>
+</tr>
+
+<tr>
+	<td style="vertical-align:middle">
+	<button id=cardbtn> Apply </button>
+	<img id=cardloading> 
+	<input id="card" type=checkbox checked>
+	</td>
+	<td>
+		<img src="https://via.placeholder.com/150" >
+	</td>
+</tr>
+
+<tr>
+	<td style="vertical-align:middle">
+	<button id=btn90> Apply </button>
+	<img id=loading90 >
+	<input id="medal90" type=checkbox checked>
+	</td>
+	<td>
+		<img src="https://via.placeholder.com/150" >
+	</td>
+</tr>
+
+</table> 
 </div>
 
 <div class="success"> 
-success 
-</div>
+<table style="min-height:150px;">
+<tr><td style="text-align:center; vertical-align:middle;">
+<button> Confirm Everything </button> 
+<img id=done>
+</td></tr>
+</table>
+
+</div>

js/workspace.js

     $(function () {
     	$('#test').html(mm.display_name);
     	console.log(mm);
+    	
+    	$("#cardloading").attr('src', mm.loading);
+    	$("#loading90").attr('src', mm.loading);
+    	$("#done").attr('src', mm.done);
+    	
+    	init_clientname_input("#username");
     });
     
+    function clientname_suggestions(){
+        return  new Bloodhound({
+            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+            queryTokenizer: Bloodhound.tokenizers.whitespace,
+            remote: {
+                url: mm.ajax_url + '?' + jQuery.param({
+                    _ajax_nonce: mm.nonce, // nonce
+                    action: "search_users", // action
+                    pattern: "QUERY",  // search pattern
+                }),
+                wildcard: 'QUERY'      // %QUERY will be replace by users input in
+            },                         // the url option.
+        });
+    }
+    
+    function onUpdateClientID (e, suggestion)
+    {
+    	console.log(suggestion);
+    	console.log(e);
+    }
+    function init_clientname_input(selector){
+      	//console.log('selector = ' + selector);
+          // init Typeahead
+          jQuery(selector).typeahead(
+          {
+              minLength: 0,
+              highlight: true,
+              hint:false,
+          },
+          {
+              name: 'clientnames',
+              source: clientname_suggestions(),   // suggestion engine is passed as the source
+              display: function(item) {        // display: 'name' will also work
+            	  //console.log('display' + item.userid);
+            	  return item.username;
+              },
+              limit: 5,
+              templates: {
+                  suggestion: function(item) {
+                  	//console.log(item);
+                    return '<div><i class="fusion-li-icon fa-user fas"></i> '+ item.username +'-'+ item.userid +'</div>';
+                  },
+              	pending: function (query) {
+              		return '<img src=' + mm.loading + '>';
+              	},
+              },
+              'updater' : function(item) {
+            	  //console.log('selected +' + item);
+            	  return item;
+              }
+          }).bind('typeahead:select', onUpdateClientID
+          ).bind('typeahead:autocomplete', onUpdateClientID);     
+    }
+    
     function errUserName(msg)
     {
     	var el = $("#errUserName");
     	}, 2000);
     }
     
-    
+    //step1 
     $(document).on("click", "#step1", function(){
     	var input = $("#username").val();
     	if ( input == "" ){
             action: "list_users", // action
             client : input,
         }, function(response,  status, xhr){
-        	alert(response.id);	
+        	step2_verify_user(response);	
         }).fail(function(){
-        	alert('network error ');
+        	errUserName("网络错误，请稍后尝试");
         });
 
     });
     
+    //step2
+    function step2_verify_user(response)
+    {
+    	var el = $("#userpass");
+    	
+    	el.slideToggle();
+    }
+    
+    
 })(jQuery);

member.php

         
         //
         $this->ajax_hook('list_users');
+        $this->ajax_hook('search_users');
     }
     
     private function ajax_hook($code, $admin_only = false)
     {
         //wp_enqueue_style( 'mm', plugins_url('css/workspace.css', __FILE__));
         wp_enqueue_script('mm', plugins_url('js/workspace.js', __FILE__), array('jquery', 'jquery-ui-core'));
+        wp_enqueue_script('typeahead', plugins_url('js/typeahead.bundle.min.js', __FILE__), array('jquery'));
         wp_localize_script( 'mm', 'mm', array(
             'ajax_url' => admin_url( 'admin-ajax.php' ),
             'nonce'    => $this->nonce, // It is common practice to comma after
             'display_name' => wp_get_current_user()->display_name,
+            'loading' => plugins_url('img/loading.gif', __FILE__),
+            'done' => plugins_url('img/done.gif', __FILE__),
             'anonymous' => !is_user_logged_in(),
         ) );
     }
     
     function ajax_list_users()
     {
-        check_ajax_referer('medal');
+        //check_ajax_referer('medal');
         $client = $_POST['client'];
         $url = $_POST["action"];
         
         wp_send_json($response);
     }
     
+    public function ajax_search_users(){
+        //check_ajax_referer('medal');
+        $pattern = $_GET['pattern'];
+        
+        $args= array(
+            'search' => "*$pattern*", // or login or nicename in this example
+            'search_fields' => array('display_name'),
+        );
+        
+        $users = new \WP_User_Query($args);
+        $count = $users->get_total();
+        
+        //build response
+        $response = array(
+            'count' => $count,
+            'date' => date('Y-m-d H:i:s'),
+            'users' => array(),
+        );
+        foreach ( $users->results as $u ) {
+            $response['users'][] = array(
+                'userid' => $u->ID,
+                'username' => html_entity_decode($u->display_name),
+            );
+        }
+        wp_send_json($response['users']);
+    }
+    
 }
 
 $mm = new Member();