Firefox PHP

jQuery Ajax: search user for private messages [SOLVED! CODE INCLUDED!]

Posted by Terradon 
jQuery Ajax: search user for private messages [SOLVED! CODE INCLUDED!]
February 13, 2011 12:58AM
Hi,
we have a lot of users on our forum, sending private messages.
the main complain is the dropdown list for adding the recipient. (too long for easy look up).

How can i integrate a search form for users?
Just an text input field, so typing (a part of ) the nickname will result in a short list of possible nicks to add as recipient?

I have tried to search for an answer in the forum, but could not find this.

Thanks in advance for any help!

<hr />
usually manuals are written by experts,
so.....that's the reason why i do not understand the manuals)



Edited 2 time(s). Last edit at 03/02/2011 12:02AM by Terradon.
jQuery Ajax: search user for private messages [SOLVED! CODE INCLUDED!]
March 01, 2011 11:51PM
It took me a while but accomplished my quest for the solution i wanted:)

I have tried different jQuery examples, and i do not know from where i got my final jQuery example.
The jQuery part is NOT my code, i just borrowed it. It took me a few days before i saw the clue how to implement it.

This post is my contribution to the Phorum community.

First i added some javascript to my header.tpl

Language: HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>   <script type="text/javascript"> function lookup(inputString) { if(inputString.length < 2) { // Hide the suggestion box. $(';#suggestions';).hide(); } else {   $.post("../autocomplete/rpc.php",{ queryString: ""+inputString+"" },function(data){ if(data.length >0) { $(';#suggestions';).show(); $(';#autoSuggestionsList';).html(data); } });     } }   function fill(thisValue) {   $(';#userselection';).val(thisValue); setTimeout("$(';#suggestions';).hide();", 200); }   </script>

I included jQuery from Googles CDN
The ajax call starts when at least 2 characters are typed.
rpc.php is the file where the query is sent to, it returns the userlist, in my case max 10 users.

Watch out: When using curls, be carefull. These have a special meaning in the template language!
You MUST add whitespace after { en before }, else nothing happens!!

it costed me 2 days, 2 stripes of aspirine, and 5 liter of black coffee, to find out this was my problem!

In your Phorum admin, disable the userlist dropdown function.

Then you need to change the form in pm_post.tpl

Language: PHP
<div class="phorum-pmuserselection"> {IF USERS} <select id="userselection" name="to_id" size="1" align="middle"> <option value=""> {LANG->PMSelectARecipient}</option> {LOOP USERS} <option value="{USERS->user_id}" <?php if (isset($_POST[';to_id';]) && $_POST[';to_id';] == $PHORUM[';TMP';][';USERS';][';user_id';]) echo ';selected="selected"';?>>{USERS->display_name}</option> {/LOOP USERS} </select>   {ELSE} <input type="text" id="userselection" name="to_name" value="<?php if (isset($_POST[';to_name';])) echo htmlspecialchars($_POST[';to_name';]); ?>" id="inputString" onkeyup="lookup(this.value);" onblur="fill();"/>   <div class="suggestionsBox" id="suggestions" style="display: none;"> <div class="sug_header">Klik op naam</div>   <div class="suggestionList" id="autoSuggestionsList"> &nbsp; </div> </div>

I changed the selectbox to an input box and added some div's around it, which you can style in css.tpl

Language: CSS
/* pm search for recipient */   .sug_header { height:26px; line-height:24px; color:white; font-family:arial, verdana, sans-serif; font-size:12px; font-weight:bold; padding:0px 0px 0px 15px; /* CHANGE LOCATION OF UI THEME IMAGE */ background:#89a url(http://www.mysite/jquery/themes/humanity/images/ui-bg_glass_25_cb842e_1x400.png) repeat-x left center; }   .suggestionsBox { position: relative; left: 30px; margin: 20px 0px 0px 100px; width: 200px; background-color: #212427; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 2px solid #000; color: #fff;   border:1px solid #8B4513; background-color:#F7EECD; padding:5px; color:black; font-size:13px; }   .suggestionList { margin: 0px; padding: 0px; }   .suggestionList li {   margin: 0px 0px 3px 0px; padding: 3px; cursor: pointer; list-style-type: none; }   .suggestionList li:hover { background-color: #659CD8; }

As you can see , i make use of a jQuery UI Theme, but you can change the css to you own needs of course:)



And at last, my backend file rpc.php:

Language: PHP
<?php // PHP5 Implementation - uses MySQLi. // mysqli(';localhost';, ';yourUsername';, ';yourPassword';, ';yourDatabase';);   $db = new mysqli(';localhost';, ';username'; ,';password';, ';database';);   if(!$db) { // Show error if we cannot connect. echo ';ERROR: Could not connect to the database.';; } else { // Is there a posted query string? if(isset($_POST[';queryString';])) { $queryString = $db->real_escape_string($_POST[';queryString';]);   // Is the string length greater than 0?   if(strlen($queryString) >0) { // Run the query: We use LIKE ';%$queryString%'; // The percentage sign is a wild-card, in my example of countries it works like this... // $queryString = ';Uni';; // Returned data = ';United States, United Kindom';;   // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.   $query = $db->query("SELECT username FROM phorum__users WHERE username LIKE ';%$queryString%'; LIMIT 10"); if($query) { // While there are results loop through them - fetching an Object (i like PHP5 btw!). while ($result = $query ->fetch_object()) { // Format the results, im using <li> for the list, you can change it. // The onClick function fills the textbox with the result.   // YOU MUST CHANGE: $result->value to $result->your_colum echo ';<li onClick="fill(\';';.$result->username.';\';);">';.$result->username.';</li>';; } } else { echo ';ERROR: There was a problem with the query.';; } } else { // Dont do anything. } // There is a queryString. } else { echo ';There should be no direct access to this script!';; } } ?>

So, have fun with it and maybe somebody sees some needed enhancements:)

<hr />
usually manuals are written by experts,
so.....that's the reason why i do not understand the manuals)



Edited 3 time(s). Last edit at 03/02/2011 12:05AM by Terradon.
Sorry, only registered users may post in this forum.

Click here to login