Simon Battersby

$("#quickfind").autocomplete({
    source: "get_descriptions.php",
    minLength: 2,//search after two characters
    select: function(event,ui){
        position = $(".scroll-content-item:contains("+ui.item.value+")").position();//search for a div containing the selected description and read its position
		
        var topValue = -(position.top);//content top is just the negative of the top position
		
	if (topValue>0) topValue = 0;//stop the content scrolling down too much
	if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much

	sliderVal = (100+(topValue*100/difference));//calculate the slider position from the content position
	$("#slider-vertical").slider("value", sliderVal);//set the slider position
	}
});

//assumimg a $mysqli connection exists...

$term = trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends

$qstring = "SELECT description as value,id FROM test WHERE description LIKE '%".$term."%'";
$result = $mysqli->query($qstring);//query the database for entries containing the term

if ($result->num_rows>0)
	{
	while($row = $result->fetch_array())//loop through the retrieved values
		{
				$row['value']=htmlentities(stripslashes($row['value']));
				$row['id']=(int)$row['id'];
				$row_set[] = $row;//build an array
		}
	echo json_encode($row_set);//format the array into json data
	}
else echo "error";

12 responses to “Vertical slider with integrated autocomplete – jQuery UI”

1. Simon says:

   October 20, 2015 at 7:21 am

   jQuery UI autocomplete won’t do this, as far as I understand your question. You’d have to write some custom code to retrieve data into different fields.

2. alfredo says:

   October 19, 2015 at 11:37 am

   and what about only value…think you have a database with a lot of date and you must print the data in different input how i can whit an autocomplete about for example campany name and print all other data about this company in the other input

3. Simon says:

   April 15, 2015 at 7:16 am

   The files can go in any folder you want – it will depend on how your website is built as to where you put them.

4. Sagarika Rayudu says:

   April 15, 2015 at 5:10 am

   So the php files would go into which folder? views folder or public or routes?Also should we add anything to app.js or package.json?

5. Simon says:

   September 24, 2014 at 7:02 pm

   The javascript stuff would be in the view, the get_descriptions.php which queries the database would be split between controller and model in an mvc set up.

6. arsitektur rumah says:

   September 24, 2014 at 10:52 am

   hii i got some problem,
   the code is works, but i have website with CI framework and i do not quite understand about mvc…

   could u tell me what code is in model or controller … .

   thanks before

7. Simon says:

   December 1, 2011 at 5:56 pm

   Tony

   I don’t sorry.

8. Tony says:

   November 29, 2011 at 10:36 am

   Hi there, do you know a way to make touch events enabled inside the autocomplete?
   Cause i wanted to at least make possible to slide up and down the list with ipad 2.

9. Simon says:

   October 14, 2010 at 8:54 am

   Mostly, but you shouldn’t need to change the sliderVal settings – highlighted in your post – these are percentages and hence stay the same regardless of the height of the scrolling div. That 562 should be 100.

10. Zelf says:

    October 13, 2010 at 8:44 pm

    So to still use your select scroll feature would this look correct then?

    $("#search_query").autocomplete({
    		source: function( request, response ) {
    			$.ajax({
    				url: "http://localhost/site/controller/",
    				type: "post",
    				dataType: "json",
    				data: {
    				term: request.term
    				},
    				success: function(data) {
    					response(data);
    				}
    			});
    		},
    		minLength: 2, //search after two characters
    		select: function(event,ui){
    		    position = $(".scroll-content-item:contains("+ui.item.value+")").position();//search for a div containing the selected description and read its position
    
    		    var topValue = -(position.top);//content top is just the negative of the top position
    
    			if (topValue>0) topValue = 0;//stop the content scrolling down too much
    			if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much
    
    			$("#scroll-content").css({top:topValue});//set the new content top
    
    			sliderVal = (562+(topValue*562/difference));//calculate the slider position from the content position
    			$("#slider-vertical").slider("value", sliderVal);//set the slider position
    		}
    	});

11. Simon says:

    October 13, 2010 at 9:10 am

    Hi Zelf

    Yes, although the default Autocomplete method is GET, you can do this using the Autocomplete callback variation and explicitly define an AJAX POST. Replace the source option above with something like:

    source: function( request, response ) {
         $.ajax({
         url: "get_descriptions.php",
         type: "post",
         dataType: "json",
         data: {
                term: request.term
                    },
         success: function(data) {
                response(data);
                    }
          });
    }

    (Obviously you’d change the target file to expect POST data as well.)

12. Zelf says:

    October 12, 2010 at 9:33 pm

    Is it possible to submit the autocomplete with the query term as a POST rather than a GET?