I am a complete beginner, so please excuse if this question is maybe phrased incorrectly or I am using the wrong terms for certain things.
I have got an MS Word Document in which there are, say, four-hundred diary entries. The software I want to write enables the user to search for specific terms within one entry. So I might want to have all the diary entries that contain both the words "happy" and "sad". Another option I want to include is to search for all diary entries written between e.g. 2008 and 2012 etc.
I would like the search to be 'dynamic', in the sense that the user might type in one word, and while that word is being typed the results-table already filters all the diary entries. So the table changes while the user is typing the word, according to what is currently being typed in the search box.
Is this possible & what exactly is this feature called? What programming language would you recommend me? I would like to have all of this online, so maybe php or ruby would be useful?
Your choice of Ruby-on-Rails is apt for this issue:
Store each diary entry as a database entry
Search these entries using "full text search" - either on the db, or third party
Return the "live" functionality with JS
MVC
Rails uses MVC programming pattern to give you ability to save into the database. This is important because if you're going to develop in rails, you'll need to keep to the MVC pattern:
Basically, you keep your Diary entries in the database, use the controller to manipulate the data & use the view to show the data:
#app/models/entry.rb
Class Entry < ActiveRecord::Base
#-> stores & brings back the entry data
end
#app/controllers/entries_controller.rb
Class EntriesController < ApplicationController
respond_to :js, :html, :json, only: :search
def index
#entries = Entry.all
end
def search
#entries = Entry.search params[:query]
respond_with #entries
end
end
#config/routes.rb
resources :entries do
collection do
match :search, via [:get, :post]
end
end
--
Full Text Search
When you send the request to your controller, the way you'll handle the search will be with a class method in your Entry model (that's where you get your data from), either referencing -
#app/models/entry.rb
Class Entry < ActiveRecord::Base
def self.search(query)
where("title LIKE '%#{query}%'")
end
end
You can either use full text search for the SQL variant you're using, or use a third party search, like Solr or something
--
"Live" Search
You can get "live" search working with Javascript (example here):
There are a number of tutorials on how to do this online - just Google live search rails or autocomplete rails. However, the principle is basically the same for all implementations:
JS will capture the text entered into a search box
JS sends Ajax request to your Rails controller
Controller sends response to ajax
JS takes response & shows on screen
Notice how this is primarily focused on the JS element? Here's the code we use:
#app/assets/javascripts/application.js
//Livesearch
$(document).ready( function() {
var base_url = window.location.protocol + "//" + window.location.host;
$('#SearchSearch').searchbox({
url: base_url + '/search/',
param: 'search',
dom_id: '#livesearch',
loading_css: '#livesearch_loading'
})
});
#app/assets/javascripts/livesearch.js
// Author: Ryan Heath
// http://rpheath.com
(function($) {
$.searchbox = {}
$.extend(true, $.searchbox, {
settings: {
url: 'search',
param: 'search',
dom_id: '#livesearch',
minChars: 2,
loading_css: '#livesearch_loading',
del_id: '#livesearch_del'
},
loading: function() {
$($.searchbox.settings.loading_css).show()
},
idle: function() {
$($.searchbox.settings.loading_css).hide()
},
start: function() {
$.searchbox.loading()
$(document).trigger('before.searchbox')
},
stop: function() {
$.searchbox.idle()
$(document).trigger('after.searchbox')
},
kill: function() {
$($.searchbox.settings.dom_id).fadeOut(50)
$($.searchbox.settings.dom_id).html('')
$($.searchbox.settings.del_id).fadeOut(100)
},
reset: function() {
$($.searchbox.settings.dom_id).html('')
$($.searchbox.settings.dom_id).fadeOut(50)
$('#SearchSearch').val('')
$($.searchbox.settings.del_id).fadeOut(100)
},
process: function(terms) {
if(/\S/.test(terms)) {
$.ajax({
type: 'GET',
url: $.searchbox.settings.url,
data: {search: terms.trim()},
complete: function(data) {
$($.searchbox.settings.del_id).fadeIn(50)
$($.searchbox.settings.dom_id).html(data.responseText)
if (!$($.searchbox.settings.dom_id).is(':empty')) {
$($.searchbox.settings.dom_id).fadeIn(100)
}
$.searchbox.stop();
}
});
return false;
}else{
$.searchbox.kill();
}
}
});
$.fn.searchbox = function(config) {
var settings = $.extend(true, $.searchbox.settings, config || {})
$(document).trigger('init.searchbox')
$.searchbox.idle()
return this.each(function() {
var $input = $(this)
$input
.keyup(function() {
if ($input.val() != this.previousValue) {
if(/\S/.test($input.val().trim()) && $input.val().trim().length > $.searchbox.settings.minChars){
$.searchbox.start()
$.searchbox.process($input.val())
}else{
$.searchbox.kill()
}
this.previousValue = $input.val()
}
})
})
}
})(jQuery);
Related
So, I have a React-Component (search_alerts.es6.jsx) that looks like this
class SearchAlerts extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
this.state = {
alertsArray: this.props.alerts,
zipCode: null,
bloodReq: null,
minCompensation: null,
maxCompensation: null,
requiredTime: null,
location: null,
bloodType: null,
keyWord: null
}
console.log(this.state.alertsArray);
}
........
and the ajax call that is responsible to call the get method looks like this
$.ajax({
data: JSON.stringify(stringit),
type: "GET",
url: `/findalerts/`,
contentType: "application/json",
dataType: "json",
success: function(data) {
console.log("Ajax Passed ");
console.log(data);
this.setState({
alertsArray: data
});
}.bind(this),
error: function(data) {
console.log("Ajax failed: ");
console.log(data);
}.bind(this)
});
in my routes.rb, I'm doing this
get '/findalerts', to: 'alerts#index' #Search Alerts
and in my alerts_controller
def index
#alerts = Alert.search(params[:keyword])
end
for the search, I'm doing this in alert.rb
def self.search(search)
#alerts = Alert.where("ZipCode LIKE :search ", search: "%#{search}%")
#alerts += Alert.where("compensation LIKE :search ", search: "%#{search}%")
#alerts += User.search(search)
end
Now if I pass the query in the url,like this,
http://localhost:3000/findalerts?keyword=117
it is returning for example all the alerts that has the zipcode starts from 117 as json, and the react component is fetching it and displaying it properly.
My question is, how to get the search working when user types the keyword in the search form? I've tried other examples from stack overflow,it didn't work, I know I'm missing something, but don't know what. Thanks!
I am close on this but being a javascript / json newbie I am sure I am missing something obvious here. The JSON select2 example is a bit over the top so I am lost trying to convert it to my simple implementation.
I have a Model (City) with a big list of cities with other associated data etc. I am aiming for a basic typeahead input where the city / province gets displayed and the id from the City model gets passed in the form.
Here is my JS:
$(document).ready ->
$('#e6').select2
placeholder: 'Select a City...'
minimumInputLength: 3
ajax:
url: '/cities.json'
dataType: 'json'
quietMillis: 250
data: (query) ->
{ query: query }
results: (data) ->
{ results: $.map(data, (item) ->
{
id: item.id
text: item.name + ', ' + item.province
}
) }
# formatResult: formatResult
# formatSelection: formatSelection
# initSelection: initSelection
cache: true
return
My JSON is triggering as I can confirm from my logs. For example http://localhost:3000/cities.json?query=cal yields:
[[1714,"Calais","AB"],[1716,"Calder","SK"],[1717,"Calderbank","SK"],[1731,"Calgary","AB"],[1738,"Calling Lake","AB"],[1739,"Callingwood North","AB"],[1740,"Callingwood South","AB"],[1743,"Calmar","AB"]]
Now right off the bat I think this is my issue. Should this not be:
[ id: 1731, name: "Calgary", province: "AB"], etc..?
Here is my controller:
respond_to do |format|
format.json {
render json: #cities
}
end
Looking ahead I can see that I could probably have my controller spit out the 'text' values in the "City, Province" format I want too.
So my question(s) are: am I missing something obvious in my JS and / or do I need to fix my JSON and if so how?
I am working on an rails application to manage and present images to friends and family.
In that application you can have
Events -> Subevents -> EventImages
routes.rb
resources :events do
resources :subevents do
resources :event_images
end
end
The angularjs part/page is starting when a user selects an specific event.
On the event edit page i want to present the subevents and images like that:
Subevent1 -> Upload Images Button
Image1 Image2 Image3 ...
Subevent2 -> Upload Images Button
Image1 Image2 Image3 ...
...
New Subevent Button
So basically i want to present all available subevents and the images inside each subevent on one page (there could be several subevents and several 100 images). The user should be able to add new subevents and to upload or delete images to each subevent and moving images between subevents via drag/drop. But adding/deleting/uploading/mowing is not my problem right now i just mentioned it because it might influence the solution to my problem.
Im using a nested ng-repeat to display all the information on the page
<div class="subevent" ng-repeat="subevent in event.subevents">
<li class="img" ng-repeat="image in subevent.event_images">
</li>
</div>
Im new to the angular world and im having problems now on how to retrieve the data i need for the page mentioned above.
I came up with two ideas so far:
Retrieve all the informations via an api controller in an nested form:
show.json.jbuilder
json.id #event.id
json.subevents #event.subevents do |subevent|
json.id subevent.id
json.name subevent.name
json.event_images subevent.event_images do |event_image|
json.id event_image.id
json.thumb event_image.image({ resize: "150x150" }).url
end
end
Which will give me this:
{
"id": "54d75dd9686f6c2594020000",
"subevents": [
{
"id": "54d75de1686f6c2594030000",
"name": "Test",
"event_images": [
{
"id": "54df3904686f6c41cf0c0000",
"thumb": "/uploads/event_image/54df3904686f6c41cf0c0000/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
},
{
"id": "54df56c5686f6c41cf850100",
"thumb": "/uploads/event_image/54df56c5686f6c41cf850100/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
}
]
}
]
}
And im using restangular to retrieve this information
$scope.event = Restangular.one('api/events','<%= #event.id %>').get().$object;
But this solution doesnt feel right to me. When i start to manipulate the page (uploading new images/deleting images/moving images from one subevent to another) i see myself refreshing the complete page because i see no other way here on how to just delete one image for example without reloading the complete $scope.event to get the updated page.
The other solution which came to my mind but i did not get working so far was to use the nested features of restangular to retrieve all the needed information for my page without having to create a seperate api controller.
$scope.event = Restangular.one("events",'<%= #event.id %>').all("subevents").all("event_images");
I could not find a working solution which would let me iterate over the $scope.event with ng-repeat like i did above and im not sure if this would solve my overall problem.
So the questions i would like to have answered are:
Should i stick to the API controller appreaoch or is there a way to make my second idea working to get rid of the api controller ?
How do i manipulate the images/subevents without having to reload everything ? ( an example of deleting an image on the page would be great )
This answer your second question using your current API
Plunker
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.event = {
"id": "54d75dd9686f6c2594020000",
"subevents": [
{
"id": "54d75de1686f6c2594030000",
"name": "Test",
"event_images": [
{
"id": "54df3904686f6c41cf0c0000",
"thumb": "/uploads/event_image/54df3904686f6c41cf0c0000/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
},
{
"id": "54df56c5686f6c41cf850100",
"thumb": "/uploads/event_image/54df56c5686f6c41cf850100/ebd83a10e03f9794f46cda02fdbc84d3.jpg"
}
]
}
]
};
});
app.directive('myEvent', function(){
return {
scope: { myEvent: '=' },
template: "<div>{{myEvent.id}}<div my-subevent='subevent' ng-repeat='subevent in myEvent.subevents'></div></div>",
controller: function($scope){
this.removeSubevent = function(e){
$scope.myEvent.subevents.splice($scope.myEvent.subevents.indexOf(e), 1);
};
}
};
});
app.directive('mySubevent', function(){
return {
scope: {mySubevent: '='},
template: "<div>{{ mySubevent.name }} <a href='' ng-click='remove()'>remove subevent</a><div my-subevent-img='img' ng-repeat='img in mySubevent.event_images'></div></div>",
require: '^myEvent',
link: function(scope, ele, attrs, myEventCtrl){
scope.remove = function(){
myEventCtrl.removeSubevent(scope.subevent);
};
},
controller: function($scope){
this.removeImg = function(img){
$scope.mySubevent.event_images.splice($scope.mySubevent.event_images.indexOf(img), 1);
};
}
};
});
app.directive('mySubeventImg', function(){
return {
scope: { mySubeventImg: '=' },
template: "<div><img ng-src='mySubeventImg.thumb'><a href ng-click='remove()'>remove img</a></div>",
require: '^mySubevent',
link: function(scope, ele, attrs, mySubeventCtrl){
scope.remove = function(){
mySubeventCtrl.removeImg(scope.mySubeventImg);
};
}
};
});
index.html
<div my-event="event"></div>
The website i am building is in ruby on rails and it is about agriculture equipments. I have build a regular search page with input text field which when used list all items containing keyword
What i am planning to do is to have a textfield with bootstrap autocomplete feature. The text field will show options depending on input and when a single option is selected, i need it route to the particular items detail page i.e. show page rather than listing the results.
I need help with how to route directly to an items show page using the textfield value.
How can i do that?
Further to the comments, it sounds like you'll be wanting to create some sort of livesearch functionality, which basically uses ajax to send requests on keyup to your backend (PHP, Rails, etc)
We've done something like this here (search at the top):
--
The way to make this work is 3 fold:
Specific ajax route
Javascript to handle keyup
Controller action to send response
I understand this is not exactly what you want, but hopefully it will point you in the right direction
Routes
#config/routes.rb
resources :controller do
collection do
get "search(/:query)" #-> domain.com/controler/search/your_query
end
end
Controller
#app/controllers/your_controller.rb
class YourController < ApplicationController
respond_to :json, :js, :html
def search
#response = Model.where value: params[:query]
respond_with #response
end
end
JS
#app/assets/javascripts/jquery.livesearch.js
// Author: Ryan Heath
// http://rpheath.com
(function($) {
$.searchbox = {}
$.extend(true, $.searchbox, {
settings: {
url: 'search',
param: 'search',
dom_id: '#livesearch',
minChars: 2,
loading_css: '#livesearch_loading',
del_id: '#livesearch_del'
},
loading: function() {
$($.searchbox.settings.loading_css).show()
},
idle: function() {
$($.searchbox.settings.loading_css).hide()
},
start: function() {
$.searchbox.loading()
$(document).trigger('before.searchbox')
},
stop: function() {
$.searchbox.idle()
$(document).trigger('after.searchbox')
},
kill: function() {
$($.searchbox.settings.dom_id).fadeOut(50)
$($.searchbox.settings.dom_id).html('')
$($.searchbox.settings.del_id).fadeOut(100)
},
reset: function() {
$($.searchbox.settings.dom_id).html('')
$($.searchbox.settings.dom_id).fadeOut(50)
$('#SearchSearch').val('')
$($.searchbox.settings.del_id).fadeOut(100)
},
process: function(terms) {
if(/\S/.test(terms)) {
$.ajax({
type: 'GET',
url: $.searchbox.settings.url,
data: {search: terms.trim()},
complete: function(data) {
$($.searchbox.settings.del_id).fadeIn(50)
$($.searchbox.settings.dom_id).html(data.responseText)
if (!$($.searchbox.settings.dom_id).is(':empty')) {
$($.searchbox.settings.dom_id).fadeIn(100)
}
$.searchbox.stop();
}
});
return false;
}else{
$.searchbox.kill();
}
}
});
$.fn.searchbox = function(config) {
var settings = $.extend(true, $.searchbox.settings, config || {})
$(document).trigger('init.searchbox')
$.searchbox.idle()
return this.each(function() {
var $input = $(this)
$input
.keyup(function() {
if ($input.val() != this.previousValue) {
if(/\S/.test($input.val().trim()) && $input.val().trim().length > $.searchbox.settings.minChars){
$.searchbox.start()
$.searchbox.process($input.val())
}else{
$.searchbox.kill()
}
this.previousValue = $input.val()
}
})
})
}
})(jQuery);
#app/assets/javascripts/application.js
//Livesearch
$(document).ready( function() {
var base_url = window.location.protocol + "//" + window.location.host;
$('#SearchSearch').searchbox({
url: base_url + '/search/',
param: 'search',
dom_id: '#livesearch',
loading_css: '#livesearch_loading'
})
});
This is how I do my routes in backbonejs where the routing and its params are obtained first before deciding which external template to call. I find this is quite flexible.
var Router = Backbone.Router.extend({
routes: {
//'': 'renderBasic',
':module/:method/': 'renderDynamicViewPageBasic',
':module/:branch/:method/': 'renderDynamicViewPageBranch',
':module/:branch/:method/set:setnumber/page:pagenumber/': 'renderDynamicViewPagePager',
':module/:branch/:method?set=:setnumber&page=:pagenumber': 'renderDynamicViewPagePager'
},
renderDynamicViewPageBasic: function (module,method) {
$(el).html(Handlebars.getTemplate('template1')(data));
},
renderDynamicViewPageBranch: function (module,branch,method) {
$(el).html(Handlebars.getTemplate('template2')(data));
},
renderDynamicViewPagePager: function (module,branch,method,setnumber,pagenumber) {
$(el).html(Handlebars.getTemplate('template3')(data));
}
});
How about in emberjs, can I do the same - do the rout and get its params afirst before deciding which external template to call?
I read the documentation and tested it. It seems to be less flexible - for instance,
App.Router.map(function() {
this.route("about", { path: "/about" });
this.route("favorites", { path: "/favs" });
});
Is it possible to get the route and params and then the controller before getting the template?
if not, it seems to be the same as case using Angularjs which I finally decided not to use it because it gets the template first before sorting out the params.
You can define the template "post params" in EmberJs using the renderTemplate hook, where you can customize which template you'd like to use.
http://emberjs.jsbin.com/oXUqUJAh/1/edit
App.Router.map(function() {
this.route('apple', {path: 'apple/:id'});
});
App.AppleRoute = Ember.Route.extend({
model: function(params) {
return {coolProperty: params.id};
},
renderTemplate: function(controller, model) {
// send in the template name
this.render(model.coolProperty);
}
});
You can pass a function together with $route params to get customized result in angularjs actually.
template: function($params) {
return app.$templateCache.get($params); // or make template yourself from another source
}