You could always use CSS to get the effect you're looking for. Make a <div> that has a static width & height. Set the height to be like 250px. Then, inside that div put a <ul> element. That <ul> element will be 240px wide. That should give you enough padding on the right for a scrollbar without impeding the user experience.
Then each <li> element in that <ul> will be an entry. When the list gets too long, that <div> will add a scrollbar. To force it to always show the scrollbar, set the styletag: overflow: scroll.
An example:
<html>
<head>
<style type="text/css"><!--
div#item-list
{
display: block;
height: 250px;
overflow: scroll;
width: 600px;
}
div#item-list ul
{
border: 1px solid #000;
border-bottom: 0px;
width: 240px;
}
div#item-list ul li
{
border-bottom: 1px solid #000;
padding: 3px 5px;
width: 230px;
}
--></style>
</head>
<body>
<div id="item-list">
<ul>
<li>Some Title</li>
<li>Some Title 2</li>
<li>Some TItle 3</li>
<li>Some TItle 4</li>
<li>Some TItle 5</li>
<li>Some Title 6</li>
<li>Some Title</li>
<li>Some Title 2</li>
<li>Some TItle 3</li>
<li>Some TItle 4</li>
<li>Some TItle 5</li>
<li>Some Title 6</li>
<li>Some Title 13</li>
<li>Some Title 14</li>
<li>This should be hidden</li>
</ul>
</div>
</body>
</html>
Now, if each <li> item is 10px high, that would list about 14 items (10 px + 6px padding + 1px border = 17px per item * 14 ~= 238 px). So the 15th item would be just out of visibility range which would make the scrollbar visible.
Then when you click on the item there are two options.
-
Utilize AJAX to make the call back to your php script to get what you need and display it in another <div> or textarea.
-
Encode all the information about the items into JSON and include that in the output from PHP and then when the user clicks on on a name the javascript reads the relevant json entry and populates the <div> or textarea.
Hope that helps.
