User Select form field like in Membership "Add member"

I'm trying to figure out how to create a select form field for selecting a user and have it work like the one in the Membership 2 Pro "Add Member" area where you can input 3 or more characters into a field to narrow down the list.

I'm editing an existing plugin, so what I need to know is how to edit this to work like the "Add Member" rather than the very long drop down...

<select name="upf_user" id="upf_user">
		<?php
		$users = get_users();
		$upf_user = get_post_meta($post->ID, 'upf_user', true);
		foreach ($users as $user) { ?>
			<option value="<?php echo $user->ID;?>" <?php if ($upf_user == $user->user_login) echo 'selected="selected"';?>><?php echo $user->display_name;?></option>
			<?php
		}
		?>
	</select>

I've tried searching through Membership 2 files, but can't find the relevant code to use as an example to get me started.

Any help would be appreciated.

Thanks
Scott

  • Adam Czajczyk

    Hello Scott,

    I hope you're well today and thank you for your question!

    I agree that this is a handy solution, especially when dealing with a large volume of users. I'm not quite sure how this is made in case of Membership 2 Pro plugin but I think the way to go here would be to use some jQuery and ajax calls.

    The idea is to create a simple form like this:

    <select>
    HERE GOES AJAX call
    </select>

    Where instead of "hardcoding" all "option" input fileds you'd use jQuery (e.g. "keyUp()" event) on a filed and each time a character is put into the form field it would then call a "search user" function via ajax. The "search user" would be a custom function that would perform a database on users db table searching for all users whose usernames start with characters fetched from the form. Some "pseudo code" for both these parts would be e.g.

    $("#search_user_field").keyUp(function() {
    var to_search = $(this).val();
    
    response = CALL TO AJAX passing $to_search as search parameter
    foreach response {
    output = '<option value="' + response + '">' + response + '</option>'
    $("#search_form").append(output)
    }
    })

    and an ajax part would search using SQL query similar to this:

    SELECT * FROM users WHERE username LIKE $to_search%

    I hope that gives you some idea :slight_smile: If you have any further questions on this, let me know please!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.