Trigger a "tap" using value of AutocompleteInput in Bokeh - bokeh

Question

I'm making a scatter plot of some data using Bokeh from a pandas dataframe (df). The dataframe is university data, and has columns "faculty_salary", "tuition", "sector" and "institution_name". The plot is faculty_salary vs tuition, and I'm using the sector to color the data, as shown below.
I currently have the tap tool which greys-out all other data points except for the one you clicked, as shown below.
What I want to do is use the AutocompleteInput widget to select an institution_name from the autocomplete and have it highlight that data point by graying out all the others, just like the tap tool. The AutocompleteInput widget is working fine, it's just the code to make it highlight that data point that I'm struggling to figure out. Here's where I'm at:
source = ColumnDataSource(df)
autocomp = AutocompleteInput(completions=df['name'].tolist())
callback = CustomJS(args=dict(source=source), code="""
what do I put here?? It doesn't seem to have a cb_obj
""")
autocomp.js_on_change('value',callback)
Please let me know how I can achieve the functionality I described: use the selected value in the AutocompleteInput to highlight the datapoint it corresponds to. I should note that for my application I would prefer a CustomJS solution, and not a Bokeh server solution.
Edit: It turns out that my browser (Chrome in Linux) doesn't recognize that an autocompletion value has been selected, but Firefox for Linux does. I think this must be because Jquery UI says:
This widget manipulates its element's value programmatically, therefore a native change event may not be fired when the element's value changes.
Suggestions for how to get around this in Bokeh are welcome.

Answer 1

Here is the Bokeh server solution :
from bokeh.layouts import layout
from bokeh.io import curdoc
from bokeh.models.widgets import AutocompleteInput
from bokeh.models.widgets import (Panel, Tabs, DataTable, TableColumn,
Paragraph, Slider, Div, Button, Select)
from bokeh.plotting import figure, ColumnDataSource
from bokeh.models import HoverTool,TapTool
def update_selected(wttr,old,new):
a_val = autocomp.value
names = source.data['names']
ind = [i for i,x in enumerate(names) if x == a_val]
source.selected={'0d': {'glyph': None, 'indices': []}, '1d': {'indices': ind}, '2d': {}}
data_dict = {'names':['test2','test3','hello','goodbye'],
'x':[0,1,2,3], 'y':[10,20,30,40]}
source = ColumnDataSource(data_dict)
autocomp = AutocompleteInput(completions=['test2','test3','hello','goodbye'])
autocomp.on_change('value',update_selected )
fig = figure(plot_width=400,
plot_height=400,
x_axis_label='x',
y_axis_label='y',
tools=["pan","hover","box_zoom","reset,save"])
fig.scatter('x','y',source=source)
layout = layout([[fig, autocomp]])
curdoc().add_root(layout)
EDIT : here is the solution using customJS
from bokeh.layouts import layout
from bokeh.io import curdoc
from bokeh.models.widgets import AutocompleteInput
from bokeh.plotting import figure, ColumnDataSource
from bokeh.models.callbacks import CustomJS
data_dict = {'names':['test2','test3','hello','test3'],
'x':[0,1,2,3], 'y':[10,20,30,40]}
source = ColumnDataSource(data_dict)
fig = figure(plot_width=400,
plot_height=400,
x_axis_label='x',
y_axis_label='y',
tools=["pan","hover","box_zoom","reset,save"])
fig.scatter('x','y',source=source)
autocomp = AutocompleteInput(completions=['test2','test3','hello','goodbye'])
code = """
var autocomplete = cb_obj.value
var names = source.data.names
function getAllIndexes(arr, val) {
var indexes = [], i;
for(i = 0; i < arr.length; i++)
if (arr[i] === val)
indexes.push(i);
return indexes;
}
var index = getAllIndexes(names,autocomplete)
source.selected = {'0d':{indices: [0]}, '1d':{indices: index},'2d':{indices: [0]}}
"""
callback = CustomJS(args={'source':source}, code=code)
autocomp.callback = callback
layout = layout([[fig, autocomp]])
curdoc().add_root(layout)