Auto Complete Dropdown Boxes For Article(backend)

deserteagle369 · Post by **deserteagle369** » Fri Mar 29, 2013 4:50 am

If you have many categories it will be difficult to select the category from tree menu when create new articles in knowledge base, so I customize it use jquery auto complete to make it easy.

The trick is when submit the article, the category value is id not text, so we need a hidden input to store the id retrieve from database hesk_kb_categories, then submit this id.

1. admin new article - category - auto complete - create search php
D:\wamp\www\hesk\admin\pseries_id_check.php

Code: Select all

<?php
define('IN_SCRIPT',1);
define('HESK_PATH','../');

/* Get all the required files and functions */
require(HESK_PATH . 'hesk_settings.inc.php');
require(HESK_PATH . 'inc/common.inc.php');
require(HESK_PATH . 'inc/database.inc.php');

hesk_dbConnect(); 

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select id,name from hesk_kb_categories where name LIKE '%$q%'";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
 $pid = $rs['id'];
 $pserie = $rs['name'];
 echo "$pserie|$pid\n";
}
?>

2. admin new article - category - auto complete - function
D:\wamp\www\hesk\admin\manage_knowledgebase.php
line 92

Code: Select all

"<html>
<head>
<meta charset=""UTF-8"" />
<script type=""text/javascript"" src=""../js/jquery-1.4.2.js""></script>
<script type='text/javascript' src='../js/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='../js/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src=""../js/jquery.autocomplete.js""></script>
<link rel=""stylesheet"" type=""text/css"" href=""../js/jquery.autocomplete.css"" />

<script type=""text/javascript"">
$().ready(function() {

 $(""#pcategory"").autocomplete(""pseries_id_check.php"", {
  width: 320,
  matchContains: true,
  mustMatch: true,
  minChars: 2,
  selectFirst: false
 });

 $(""#pcategory"").result(function(event, data, formatted) {
  $(""#serie_id"").val(data[1]);
 });
});
</script>
</head>
</html>"

3. admin new article - category - auto complete - form
D:\wamp\www\hesk\admin\manage_knowledgebase.php
line 315
from

<td><select name="catid"><?php $listBox->printMenu(); ?></select></td>

to

Code: Select all

   <!--<td><select name="catid"><?php $listBox->printMenu(); ?></select></td>-->
   <td><input type="text" name="pcategory" id="pcategory" size="46" /><button type="reset" value="reset">Clear</button><input type="text" name="serie_id" id="serie_id" size="10" /></td>

4. admin new article - category - auto complete - submit value
D:\wamp\www\hesk\admin\manage_knowledgebase.php
line 1883
from

$catid = hesk_isNumber($_POST['catid']) or $catid = 1;

to

Code: Select all

$catid = hesk_isNumber($_POST['serie_id']) or $catid = 1;

That's all, it's similar to do the jquery auto complete for new ticket, but submit id not text this time, it works in IE6,7,8, FF3,8,13 and chrome11.